UNPKG

3.13 kB Markdown View Raw
1---
2title: Route Module Type Safety
3---
4
5# Route Module Type Safety
6
7[MODES: framework]
8
9React Router generates route-specific types to power type inference for URL params, loader data, and more.
10This guide will help you set it up if you didn't start with a template.
11
12To learn more about how type safety works in React Router, check out [Type Safety Explanation](../explanation/type-safety).
13
14## 1. Add `.react-router/` to `.gitignore`
15
16React Router generates types into a `.react-router/` directory at the root of your app. This directory is fully managed by React Router and should be gitignore'd.
17
18```txt
19.react-router/
20```
21
22## 2. Include the generated types in tsconfig
23
24Edit your tsconfig to get TypeScript to use the generated types. Additionally, `rootDirs` needs to be configured so the types can be imported as relative siblings to route modules.
25
26```json filename=tsconfig.json
27{
28 "include": [".react-router/types/**/*"],
29 "compilerOptions": {
30 "rootDirs": [".", "./.react-router/types"]
31 }
32}
33```
34
35If you are using multiple `tsconfig` files for your app, you'll need to make these changes in whichever one `include`s your app directory.
36For example, the [`node-custom-server` template](https://github.com/remix-run/react-router-templates/tree/390fcec476dd336c810280479688fe893da38713/node-custom-server) contains `tsconfig.json`, `tsconfig.node.json`, and `tsconfig.vite.json`. Since `tsconfig.vite.json` is the one that [includes the app directory](https://github.com/remix-run/react-router-templates/blob/390fcec476dd336c810280479688fe893da38713/node-custom-server/tsconfig.vite.json#L4-L6), that's the one that sets up `.react-router/types` for route module type safety.
37
38## 3. Generate types before type checking
39
40If you want to run type checking as its own command — for example, as part of your Continuous Integration pipeline — you'll need to make sure to generate types _before_ running typechecking:
41
42```json
43{
44 "scripts": {
45 "typecheck": "react-router typegen && tsc"
46 }
47}
48```
49
50## 4. Type-only auto-imports (optional)
51
52When auto-importing the `Route` type helper, TypeScript will generate:
53
54```ts filename=app/routes/my-route.tsx
55import { Route } from "./+types/my-route";
56```
57
58But if you enable [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax):
59
60```json filename=tsconfig.json
61{
62 "compilerOptions": {
63 "verbatimModuleSyntax": true
64 }
65}
66```
67
68Then, you will get the `type` modifier for the import automatically as well:
69
70```ts filename=app/routes/my-route.tsx
71import type { Route } from "./+types/my-route";
72// ^^^^
73```
74
75This helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
76
77## Conclusion
78
79React Router's Vite plugin should be automatically generating types into `.react-router/types/` anytime you edit your route config (`routes.ts`).
80That means all you need to do is run `react-router dev` (or your custom dev server) to get to up-to-date types in your routes.
81
82Check out our [Type Safety Explanation](../explanation/type-safety) for an example of how to pull in those types into your routes.
83
\No newline at end of file