[번역] Type checking with TypeScript (React Navigation)
Type checking the navigator
route 이름과 파라미터들의 타입 체크를 위해서 첫 번째 할 일은 route 이름을 route 파라미터들에 매핑하는 타입 객체를 만드는 것입니다. 예를 들어 root navigator 안에 Profile이라는 route가 있으며 파라미터값으로 userId 값을 가진다고 가정하면 다음과 같이 작성할 수 있습니다.
이를 다른 route들에게도 동일하게 적용해주면
undefined는 아무런 값도 파라미터로 갖지 않는다는 뜻입니다. undefined와 유니온 타입을 함께 사용할 경우 파라미터가 들어올 수도 있고 들어오지 않을 수도 있다는 것을 표현할 수 있습니다. 맵핑을 정의하고 난 후에는 Navigator에게 해당 맵핑을 사용할 것이라고 알려줘야 하는데 이를 위해 다음과 같이 createXNavigator 함수의 제네릭으로 설정해줍니다.
그리고 나서 다음과 같이 사용하면 됩니다.
이는 Navigator와 Screen 컴포넌트들의 props에게 타입 체킹과 자동 완성 기능을 제공해줄 것입니다.
Type checking screens
Screen 컴포넌트들의 타입 체크를 위해선, navigation과 route prop를 받는 Screen에게 해당 props의 설명이 필요합니다. 이를 위해 Navigator에 해당하는 타입을 import 해줄 필요가 있습니다. 예를 들어 다음과 같이 StackNavigator를 위한 StackNavigationProp가 있습니다.
Navigation prop 타입은 2가지 제네릭을 갖는데, 하나는 이전에 타입 객체로 만들어놓은 파라미터 목록이고 다른 하나는 현재 route명입니다. 이를 통해서 navigate를 사용해서 이동 또는 push할 때 route명과 파라미터를 타입 체크할 수 있습니다. 현재 route명은 setParams를 호출할 때 타입 체크를 위해서 필요합니다.
Drawer, BottomTab Navigator를 사용할 때도 비슷하게 import 하여 사용할 수 있습니다. route prop를 위해서는 RouteProp import하여 다음과 같이 사용해야 합니다.
이는 route.params 같은 route 객체를 타입 체크 해줍니다.
위 내용들을 정리하면
navigation과 route props 타입 정의를 따로 하지 않고 같이 하는 방법도 있습니다. 사용하고자 하는 Navigator에 맞게 import 하여 다음과 같이 사용하면 됩니다.
그리고 나서 정의해놓은 Props를 컴포넌트에서 사용하려면 다음과 같이 사용하면 됩니다.
함수 컴포넌트
클래스 컴포넌트
원글에서는 컴포넌트 파일에서 Props 타입을 반복해서 만들기 보다는 types.tsx라는 파일을 따로 만들어서 원하는 곳에 import 하여 사용하는 방법을 추천하고 있습니다.
Nesting navigators
2개 이상의 Navigator를 사용할 때, Screen의 navigation prop은 여러 개의 navigation prop 집합입니다. 예를 들어 만약 StackNavigation 안에 TabNavigiontion이 위치한 구조가 있다고 가정하면 navigation prop은 jumpTo (TabNavigator에 존재하는)와 push (StackNavigator에 존재하는) 모두를 갖고 있을 것입니다. 따라서, 여러 개의 navigator 타입을 좀 더 쉽게 정의하기 위해서 CompositeNavigationProp를 사용합니다.
CompositeNavigationProp은 2가지 파라미터값을 갖는데, 첫 번째 파라미터로는 본래의 navigation type (Screen을 위한 Navigator, 위 가정대로라면 Profile screen을 포함하고 있는 TabNavigator가 됩니다.) 그리고 두 번째 파라미터로는 상위의 Navigator입니다.(primary navigator를 감싸고 있는 navigator). 하위 navigation 타입은 항상 Screen의 route명을 두 번째 파라미터값으로 갖고 있어야만 합니다.
감싸고 있는 Navigator가 여러 개라면 다음과 같이 nested 형식으로 만들어주어야 합니다.
Annotating useNavigation, useRoute
hooks를 이용하여 navigation과 route prop를 가져와서 사용할 수 있는데 이때 타입 체크를 위해 다음과 같이 사용합니다.
사용하는 타입 매개 변수가 정확하지 않을 수 있고 정적으로 확인할 수 없기 때문에 이 방법을 통해서는 타입 체크가 안전하지는 않다는 점에 유의해야 합니다.
Annotating options and screenOptions
Navigator 컴포넌트에 Screen 옵션 또는 screenOptions prop를 보내서 사용할 때, 옵션들은 이미 타입 체크가 된 상태라서 추가적으로 어떤 것을 해줄 필요는 없습니다. 단, 해당 옵션들을 추출하여 다른 객체에서 사용하고 싶을 때가 있을 텐데 그때는 다음과 같이 사용하면 됩니다. (사용하고자 하는 Navigator에 맞게 import 하여 사용)
