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

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

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

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

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

.react-router/

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

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

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

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

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

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

4. 型専用の自動インポート（オプション）

Route型ヘルパーを自動インポートすると、TypeScriptは次のように生成します。

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

これは機能しますが、type修飾子をインポートにも自動的に追加したい場合があります。

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

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

VSCode

VSCodeでは、コマンドパレットから「TypeScript › 環境設定：型専用の自動インポートを優先」を選択するか、preferTypeOnlyAutoImportsを手動で設定することで、この動作を自動的に取得できます。

{
  "typescript.preferences.preferTypeOnlyAutoImports": true
}

eslint

eslintでは、consistent-type-importsルールに対してprefer: "type-imports"を設定することで、この動作を取得できます。

{
  "@typescript-eslint/consistent-type-imports": [
    "warn",
    { "prefer": "type-imports" }
  ]
}

まとめ

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

ルートにこれらの型を取り込む方法の例については、型安全性の説明をご覧ください。