UNPKG

3.45 kB Markdown View 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. Typing `AppLoadContext`
54
55## Extending app `Context` types
56
57To define your app's `context` type, add the following in a `.ts` or `.d.ts` file within your project:
58
59```typescript
60import "react-router";
61declare module "react-router" {
62 interface AppLoadContext {
63 // add context properties here
64 }
65}
66```
67
68## 5. Type-only auto-imports (optional)
69
70When auto-importing the `Route` type helper, TypeScript will generate:
71
72```ts filename=app/routes/my-route.tsx
73import { Route } from "./+types/my-route";
74```
75
76But if you enable [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax):
77
78```json filename=tsconfig.json
79{
80 "compilerOptions": {
81 "verbatimModuleSyntax": true
82 }
83}
84```
85
86Then, you will get the `type` modifier for the import automatically as well:
87
88```ts filename=app/routes/my-route.tsx
89import type { Route } from "./+types/my-route";
90// ^^^^
91```
92
93This helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
94
95## Conclusion
96
97React Router's Vite plugin should be automatically generating types into `.react-router/types/` anytime you edit your route config (`routes.ts`).
98That 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.
99
100Check out our [Type Safety Explanation](../explanation/type-safety) for an example of how to pull in those types into your routes.
101
\No newline at end of file