docs: add links in Configuring TypeScript section (#1368)

* docs: added links to typescript.md

* [autofix.ci] apply automated fixes

* docs: Fixed link error

* docs: Updated links in typescript.md

* docs: Updated links in typescript.md v6

* docs: Added more link to TS section

* docs: Fixed Build pages error

* docs: FIxed Build pages error

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: stanleyoos

versioned_docs/version-6.x/typescript.md

@@ -50,7 +50,7 @@ And then we can use it:
 </RootStack.Navigator>
 ```
 
-This will provide type checking and intelliSense for props of the `Navigator` and `Screen` components.
+This will provide type checking and intelliSense for props of the `Navigator` and [`Screen`](screen.md) components.
 
 :::note
 
@@ -88,9 +88,9 @@ If you have an `id` prop for your navigator, you can do:
 type Props = NativeStackScreenProps<RootStackParamList, 'Profile', 'MyStack'>;
 ```
 
-This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call `setParams`.
+This allows us to type check route names and params which you're navigating using `navigate`, [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams).
 
-Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on.
+Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on.
 
 Then you can use the `Props` type you defined above to annotate your component.
 
@@ -133,7 +133,7 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp<
 >;
 ```
 
-Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc.
+Similarly, you can import `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabNavigationProp` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) etc.
 
 To get the type for the `route` prop, we need to use the `RouteProp` type from `@react-navigation/native`:
 
@@ -321,7 +321,7 @@ declare global {
 
 The `RootParamList` interface lets React Navigation know about the params accepted by your root navigator. Here we extend the type `RootStackParamList` because that's the type of params for our stack navigator at the root. The name of this type isn't important.
 
-Specifying this type is important if you heavily use `useNavigation`, `Link` etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the `linking` prop.
+Specifying this type is important if you heavily use `useNavigation`, [`Link`](link.md) etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the [`linking`](navigation-container.md#linking) prop.
 
 ### Organizing types
 

versioned_docs/version-7.x/navigation-container.md

@@ -166,6 +166,8 @@ export default function App() {
 
 If you're using a regular ref object, keep in mind that the ref may be initially `null` in some situations (such as when linking is enabled). To make sure that the ref is initialized, you can use the [`onReady`](#onready) callback to get notified when the navigation container finishes mounting.
 
+Check how to setup `ref` with TypeScript [here](typescript.md#annotating-ref-on-navigationcontainer).
+
 See the [Navigating without the navigation prop](navigating-without-navigation-prop.md) guide for more details.
 
 ### Methods on the ref

versioned_docs/version-7.x/screen-options.md

@@ -11,6 +11,8 @@ Each screen can configure various aspects about how it gets presented in the nav
 
 In the [configuring the header bar](headers.md) section of the fundamentals documentation we explain the basics of how this works. Also see the [screen options resolution guide](screen-options-resolution.md) to get an idea of how they work when there are multiple navigators.
 
+See [our docs](typescript.md#annotating-options-and-screenoptions) to learn more about how to use TypeScript with `screenOptions` and `options`.
+
 There are 3 ways of specifying options for screens:
 
 ### `options` prop on `Screen`

versioned_docs/version-7.x/typescript.md

@@ -14,7 +14,7 @@ React Navigation can be configured to type-check screens and their params, as we
 
 There are 2 steps to configure TypeScript with the static API:
 
-1. Each screen component needs to specify the type of the `route.params` prop that it accepts. The `StaticScreenProps` type makes it simpler:
+1. Each screen component needs to specify the type of the [`route.params`](params.md) prop that it accepts. The `StaticScreenProps` type makes it simpler:
 
    ```ts
    import type { StaticScreenProps } from '@react-navigation/native';
@@ -60,11 +60,11 @@ There are 2 steps to configure TypeScript with the static API:
    // highlight-end
    ```
 
-   This is needed to type-check the `useNavigation` hook.
+   This is needed to type-check the [`useNavigation`](use-navigation.md) hook.
 
 ## Navigator specific types
 
-Generally, we recommend using the default types for the `useNavigation` prop to access the navigation object in a navigator-agnostic manner. However, if you need to use navigator-specific APIs, you need to manually annotate `useNavigation`:
+Generally, we recommend using the default types for the [`useNavigation`](use-navigation.md) prop to access the navigation object in a navigator-agnostic manner. However, if you need to use navigator-specific APIs, you need to manually annotate [`useNavigation`](use-navigation.md):
 
 ```ts
 type BottomTabParamList = StaticParamList<typeof BottomTabNavigator>;
@@ -78,7 +78,7 @@ type ProfileScreenNavigationProp = BottomTabNavigationProp<
 const navigation = useNavigation<ProfileScreenNavigationProp>();
 ```
 
-Note that annotating `useNavigation` this way is not type-safe since we can't guarantee that the type you provided matches the type of the navigator.
+Note that annotating [`useNavigation`](use-navigation.md) this way is not type-safe since we can't guarantee that the type you provided matches the type of the navigator.
 
 ## Nesting navigator using dynamic API
 
@@ -103,7 +103,7 @@ const RootStack = createStackNavigator({
 
 Here, the `HomeTabs` component is defined using the dynamic API. This means that when we create the param list for the root navigator with `StaticParamList<typeof RootStack>`, it won't know about the screens defined in the nested navigator. To fix this, we'd need to specify the param list for the nested navigator explicitly.
 
-This can be done by using the type of the `route` prop that the screen component receives:
+This can be done by using the type of the [`route`](route-object.md) prop that the screen component receives:
 
 ```ts
 type HomeTabsParamList = {
@@ -157,7 +157,7 @@ type RootStackParamList = {
 
 Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional.
 
-After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions:
+After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md) functions:
 
 ```tsx
 import { createStackNavigator } from '@react-navigation/stack';
@@ -179,7 +179,7 @@ And then we can use it:
 </RootStack.Navigator>
 ```
 
-This will provide type checking and intelliSense for props of the `Navigator` and `Screen` components.
+This will provide type checking and intelliSense for props of the [`Navigator`](navigator.md) and [`Screen`](screen.md) components.
 
 :::note
 
@@ -217,9 +217,9 @@ If you have an `id` prop for your navigator, you can do:
 type Props = NativeStackScreenProps<RootStackParamList, 'Profile', 'MyStack'>;
 ```
 
-This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call `setParams`.
+This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams).
 
-Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on.
+Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on.
 
 Then you can use the `Props` type you defined above to annotate your component.
 
@@ -262,7 +262,7 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp<
 >;
 ```
 
-Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc.
+Similarly, you can import `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabNavigationProp` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) etc.
 
 To get the type for the `route` object, we need to use the `RouteProp` type from `@react-navigation/native`:
 
@@ -300,7 +300,7 @@ type TabParamList = {
 
 ### Combining navigation props
 
-When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both `jumpTo` (from the tab navigator) and `push` (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type:
+When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both [`jumpTo`](tab-actions.md#jumpto) (from the tab navigator) and [`push`](stack-actions.md#push) (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type:
 
 ```ts
 import type { CompositeScreenProps } from '@react-navigation/native';
@@ -349,7 +349,7 @@ Prefer [specifying a default type](#specifying-default-types-for-usenavigation-l
 
 :::
 
-To annotate the `navigation` object that we get from `useNavigation`, we can use a type parameter:
+To annotate the `navigation` object that we get from [`useNavigation`](use-navigation.md), we can use a type parameter:
 
 ```ts
 const navigation = useNavigation<ProfileScreenNavigationProp>();
@@ -364,7 +364,7 @@ Prefer using the [`route` object](route-object.md) from the screen component's p
 
 :::
 
-To annotate the `route` object that we get from `useRoute`, we can use a type parameter:
+To annotate the `route` object that we get from [`useRoute`](use-route.md), we can use a type parameter:
 
 ```ts
 const route = useRoute<ProfileScreenRouteProp>();
@@ -463,7 +463,7 @@ declare global {
 
 The `RootParamList` interface lets React Navigation know about the params accepted by your root navigator. Here we extend the type `RootStackParamList` because that's the type of params for our stack navigator at the root. The name of this type isn't important.
 
-Specifying this type is important if you heavily use `useNavigation`, `Link` etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the `linking` prop.
+Specifying this type is important if you heavily use [`useNavigation`](use-navigation.md), [`Link`](link.md) etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the [`linking`](navigation-container.md#linking) prop.
 
 ## Organizing types
 
@@ -520,7 +520,7 @@ function PopularScreen({ navigation, route }: HomeTabScreenProps<'Popular'>) {
 }
 ```
 
-If you're using hooks such as `useRoute`, you can write:
+If you're using hooks such as [`useRoute`](use-route.md), you can write:
 
 ```ts
 import type { HomeTabScreenProps } from './navigation/types';

versioned_docs/version-7.x/use-navigation.md

@@ -143,6 +143,8 @@ export default App;
 </TabItem>
 </Tabs>
 
+Check how to setup `useNavigation` with TypeScript [here](typescript.md#annotating-usenavigation).
+
 See the documentation for the [`navigation` object](navigation-object.md) for more info.
 
 ## Using with class component

versioned_docs/version-7.x/use-route.md

@@ -142,6 +142,8 @@ export default App;
 </TabItem>
 </Tabs>
 
+Check how to setup `useRoute` with TypeScript [here](typescript.md#annotating-useroute).
+
 See the documentation for the [`route` object](route-object.md) for more info.
 
 ## Using with class component