global type

useNavigation, Link ref 등의 API들에 수동으로 annotating을 하는 대신
기본 type으로 사용될 root navigator에 대해 전역 type을 선언할 수 있다
전역 type을 사용하기 위해 코드 어딘가에 다음의 코드를 추가해야 한다

declare global {
	namespace ReactNavigation {
      interface RootParamList extends RootStackParamList {}
    }
}   

RootParamList interface는 RootNavigator가 허용하는 params에 대해 React Navigation에게 알려준다
RootStackParamList type은 root에 있는 stack navigator에 대한 params type 이기 때문에 extend 한다
RootStackParamList의 이름은 중요하지 않다

앱에서 useNavigation, Link 등을 자주 사용한다면 이렇게 type 안정성을 위해 이런식으로 global type을 지정해주는 것이 중요하다
또한 linking prop에 중첩이 있는지도 명확히 할 수 있다

Organizing types

React Navigation의 타입을 작성할 때
조직화된 내용을 유지하는 것이 좋다

1. React Navigation과 관련된 type을 포함하는 별도의 파일을 만드는 것이 좋다
2. component에서 Composite Navigation Prop을 직접 사용하는 대신 재사용 할 수 있는 helper type을 만드는 것이 좋다
3. root navigation의 전역 type을 설정하면 많은 곳에서 수동 주석 처리 하는 것을 피할 수 있다

이러한 권장 사항을 고려할 때 다음과 같은이 작성할 수 있다

import type {
  CompositeScreenProps,
  NavigatorScreenParams,
} from '@react-navigation/native';
import type { StackScreenProps } from '@react-navigation/stack';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';

export type RootStackParamList = {
  Home: NavigatorScreenParams<HomeTabParamList>;
  PostDetails: { id: string };
  NotFound: undefined;
};

export type RootStackScreenProps<T extends keyof RootStackParamList> =
  StackScreenProps<RootStackParamList, T>;

export type HomeTabParamList = {
  Popular: undefined;
  Latest: undefined;
};

export type HomeTabScreenProps<T extends keyof HomeTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<HomeTabParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

componsnts에 annotating을 할 때 다음과 같이 쓸 수 있다

import type { HomeTabScreenProps } from './navigation/types';

function PopularScreen({ navigation, route }: HomeTabScreenProps<'Popular'>) {
  // ...
}

useRoute와 같은 hooks를 사용하는 경우

import type { HomeTabScreenProps } from './navigation/type'

function PopularScreen() {
  const route = useRoute<HomeTabScreenProps<'Popular'>['route']>();

  // ...
}