UNPKG

3.14 kBMarkdownView Raw
1---
2title: Route Module Type Safety
3---
4
5# Route Module Type Safety
6
7[MODES: framework]
8
9<br/>
10<br/>
11
12React Router generates route-specific types to power type inference for URL params, loader data, and more.
13This guide will help you set it up if you didn't start with a template.
14
15To learn more about how type safety works in React Router, check out [Type Safety Explanation](../explanation/type-safety).
16
17## 1. Add `.react-router/` to `.gitignore`
18
19React 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.
20
21```txt
22.react-router/
23```
24
25## 2. Include the generated types in tsconfig
26
27Edit 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.
28
29```json filename=tsconfig.json
30{
31 "include": [".react-router/types/**/*"],
32 "compilerOptions": {
33 "rootDirs": [".", "./.react-router/types"]
34 }
35}
36```
37
38If you are using multiple `tsconfig` files for your app, you'll need to make these changes in whichever one `include`s your app directory.
39For 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.
40
41## 3. Generate types before type checking
42
43If 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:
44
45```json
46{
47 "scripts": {
48 "typecheck": "react-router typegen && tsc"
49 }
50}
51```
52
53## 4. Type-only auto-imports (optional)
54
55When auto-importing the `Route` type helper, TypeScript will generate:
56
57```ts filename=app/routes/my-route.tsx
58import { Route } from "./+types/my-route";
59```
60
61But if you enable [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax):
62
63```json filename=tsconfig.json
64{
65 "compilerOptions": {
66 "verbatimModuleSyntax": true
67 }
68}
69```
70
71Then, you will get the `type` modifier for the import automatically as well:
72
73```ts filename=app/routes/my-route.tsx
74import type { Route } from "./+types/my-route";
75// ^^^^
76```
77
78This helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
79
80## Conclusion
81
82React Router's Vite plugin should be automatically generating types into `.react-router/types/` anytime you edit your route config (`routes.ts`).
83That 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.
84
85Check out our [Type Safety Explanation](../explanation/type-safety) for an example of how to pull in those types into your routes.