😋

React Native ✗ TypeScriptのnavigator型チェック

2022/12/19に公開

React Native

React

TypeScript

tech

概要

React NativeとTypeScriptでモバイルアプリ開発をする際の、navigation及びrouteの型定義方法を備忘録がてら残します。

対象

React Navigationの必要最低限の型定義をサクっと行いたいひと
React Navigationの公式ドキュメントを読むのが面倒な人

解決方法

1. 全画面のルート名とparams(任意)の型を定義する

型定義ファイルを作成して、全画面のルート名とparamsの型を定義します。(型定義ファイルではなく、コンポーネント内に記述することも可能です。)
undefined型を指定すると、ルートがパラメータを持たないことを意味します。
なお、undefinedを含むユニオンタイプ(例：{ id: string } | undefined;)は、パラメータがオプションであることを意味します。

type.ts

    export type RootStackParamList = {
      Page1: undefined;
      Page2: { id: string };
      Page3: { id: string } | undefined;
    };

2. RootStackのジェネリックスに定義した型を渡す

createStackNavigator関数にジェネリックとして渡し、RootStackに定義した型を適応させます。
これにより、NavigatorとScreenコンポーネントのプロップに対して、型チェックが提供されます。

hogehoge.tsx

    import { createStackNavigator } from '@react-navigation/stack';
    
    const RootStack = createStackNavigator<RootStackParamList>();

3. 各スクリーンコンポーネントでプロップスの型をインポートする

次に、各スクリーンコンポーネントで型をプロップスの型をインポートし、型チェックを有効にします。
ナビゲーションプロップ用の型を取得するには、以下のように公式が提供する型をインポートする必要があります。例えば、@react-navigation/native-stackの場合はNativeStackNavigationPropとなります。

Page2Screen.tsx

    import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
    import { RootStackParamList } from '../../type';
    
    type Page2ScreenNavigationProp = NativeStackNavigationProp<
      RootStackParamList,
      'Page2'
    >;

4. プロップスで展開する

最後にコンポーネントにアノテーションをつけて終了です。
これで、navigationとrouteの型チェック・入力保管が可能になります。