ルートモジュールの型安全性

React Routerは、URLパラメータ、ローダーデータなどに対して型推論を強化するために、ルート固有の型を生成します。テンプレートから開始しなかった場合、このガイドが設定に役立ちます。

React Routerにおける型安全性の詳細については、型安全性の説明をご覧ください。

1. .react-router/を.gitignoreに追加する

React Routerは、アプリケーションのルートディレクトリに.react-router/ディレクトリに型を生成します。このディレクトリはReact Routerによって完全に管理されており、.gitignoreに追加する必要があります。

.react-router/

2. tsconfigに生成された型を含める

TypeScriptが生成された型を使用するように、tsconfigを編集します。さらに、ルートモジュールに対して相対的な兄弟として型をインポートできるように、rootDirsを設定する必要があります。

{
  "include": [".react-router/types/**/*"],
  "compilerOptions": {
    "rootDirs": [".", "./.react-router/types"]
  }
}

アプリケーションで複数のtsconfigファイルを使用している場合、アプリケーションディレクトリをincludeしているファイルでこれらの変更を行う必要があります。たとえば、node-custom-serverテンプレートには、tsconfig.json、tsconfig.node.json、tsconfig.vite.jsonが含まれています。アプリケーションディレクトリを含んでいるのはtsconfig.vite.jsonであるため、ルートモジュールの型安全性を確保するために.react-router/typesを設定するのはこのファイルです。

3. 型チェックの前に型を生成する

型チェックを独自のタスクとして実行する場合（たとえば、継続的インテグレーションパイプラインの一部として）、型チェックを実行する前に型を生成する必要があります。

{
  "scripts": {
    "typecheck": "react-router typegen && tsc"
  }
}

4. タイプのみの自動インポート（オプション）

Route型ヘルパーを自動インポートする場合、TypeScriptは以下を生成します。

import { Route } from "./+types/my-route";

しかし、verbatimModuleSyntaxを有効にすると

{
  "compilerOptions": {
    "verbatimModuleSyntax": true
  }
}

インポートにtype修飾子が自動的に追加されます。

import type { Route } from "./+types/my-route";
//     ^^^^

これは、バンドラーなどのツールが、バンドルから安全に除外できるタイプ専用のモジュールを検出するのに役立ちます。

結論

React RouterのViteプラグインは、ルート設定（routes.ts）を編集するたびに、.react-router/types/に型を自動的に生成するはずです。つまり、react-router dev（またはカスタム開発サーバー）を実行するだけで、ルートの型を最新の状態に保つことができます。

型安全性の説明で、これらの型をルートに読み込む方法の例を確認してください。