UNPKG

2.42 kB Markdown View Raw
1---
2title: Type Safety
3---
4
5# Type Safety
6
7[MODES: framework]
8
9<br/>
10<br/>
11
12If you haven't done so already, check out our guide for [setting up type safety][route-module-type-safety] in a new project.
13
14React Router generates types for each route in your app to provide type safety for the route module exports.
15
16For example, let's say you have a `products/:id` route configured:
17
18```ts filename=app/routes.ts
19import {
20 type RouteConfig,
21 route,
22} from "@react-router/dev/routes";
23
24export default [
25 route("products/:id", "./routes/product.tsx"),
26] satisfies RouteConfig;
27```
28
29You can import route-specific types like so:
30
31```tsx filename=app/routes/product.tsx
32import type { Route } from "./+types/product";
33// types generated for this route 👆
34
35export function loader({ params }: Route.LoaderArgs) {
36 // 👆 { id: string }
37 return { planet: `world #${params.id}` };
38}
39
40export default function Component({
41 loaderData, // 👈 { planet: string }
42}: Route.ComponentProps) {
43 return <h1>Hello, {loaderData.planet}!</h1>;
44}
45```
46
47## How it works
48
49React Router's type generation executes your route config (`app/routes.ts` by default) to determine the routes for your app.
50It then generates a `+types/<route file>.d.ts` for each route within a special `.react-router/types/` directory.
51With [`rootDirs` configured][route-module-type-safety], TypeScript can import these generated files as if they were right next to their corresponding route modules.
52
53For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/dev/decisions/0012-type-inference.md).
54
55[route-module-type-safety]: ../how-to/route-module-type-safety
56
57## `typegen` command
58
59You can manually generate types with the `typegen` command:
60
61```sh
62react-router typegen
63```
64
65The following types are generated for each route:
66
67- `LoaderArgs`
68- `ClientLoaderArgs`
69- `ActionArgs`
70- `ClientActionArgs`
71- `HydrateFallbackProps`
72- `ComponentProps` (for the `default` export)
73- `ErrorBoundaryProps`
74
75### --watch
76
77If you run `react-router dev` — or if your custom server calls `vite.createServer` — then React Router's Vite plugin is already generating up-to-date types for you.
78But if you really need to run type generation on its own, you can also use `--watch` to automatically regenerate types as files change:
79
80```sh
81react-router typegen --watch
82```