型安全性

まだ行っていない場合は、新しいプロジェクトで型安全性を設定するためのガイドをご覧ください。

React Routerは、アプリケーションの各ルートの型を生成し、ルートモジュールエクスポートの型安全性を提供します。

たとえば、`products/:id` ルートが設定されているとします。

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("products/:id", "./routes/product.tsx"),
] satisfies RouteConfig;

ルート固有の型は次のようにインポートできます。

import type { Route } from "./+types/product";
// types generated for this route 👆

export function loader({ params }: Route.LoaderArgs) {
  //                      👆 { id: string }
  return { planet: `world #${params.id}` };
}

export default function Component({
  loaderData, // 👈 { planet: string }
}: Route.ComponentProps) {
  return <h1>Hello, {loaderData.planet}!</h1>;
}

仕組み

React Routerの型生成は、ルート設定（デフォルトでは `app/routes.ts`）を実行して、アプリケーションのルートを決定します。そして、特別な `.react-router/types/` ディレクトリ内に、各ルートに対して `+types/<route file>.d.ts` を生成します。`rootDirs` が設定されている場合、TypeScript は、生成されたファイルを対応するルートモジュールのすぐ隣にあるかのようにインポートできます。

設計上の決定についてより深く理解するには、型推論の決定に関するドキュメントをご覧ください。

`typegen` コマンド

typegen コマンドを使用して、手動で型を生成できます。

react-router typegen

各ルートに対して、以下の型が生成されます。

LoaderArgs
ClientLoaderArgs
ActionArgs
ClientActionArgs
HydrateFallbackProps
ComponentProps (default エクスポート用)
ErrorBoundaryProps

--watch

react-router dev を実行する場合、またはカスタムサーバーが vite.createServer を呼び出す場合、React Router の Vite プラグインは既に最新の型を自動生成しています。ただし、どうしても単独で型生成を実行する必要がある場合は、--watch を使用して、ファイルの変更時に型を自動的に再生成することもできます。

react-router typegen --watch