路由模块类型安全

React Router 会生成特定于路由的类型，以便为 URL 参数、loader 数据等提供类型推断。如果您不是从模板开始，本指南将帮助您进行设置。

要了解更多关于 React Router 中类型安全的工作原理，请查看类型安全说明。

1. 将 `.react-router/` 添加到 `.gitignore`

React Router 会将类型生成到您应用根目录下的 .react-router/ 目录中。此目录由 React Router 完全管理，应将其添加到 gitignore 中。

.react-router/

2. 在 tsconfig 中包含生成的类型

编辑您的 tsconfig，使 TypeScript 使用生成的类型。此外，需要配置 rootDirs，以便可以将类型作为路由模块的相对同级导入。

{
  "include": [".react-router/types/**/*"],
  "compilerOptions": {
    "rootDirs": [".", "./.react-router/types"]
  }
}

如果您为您的应用程序使用了多个 tsconfig 文件，您需要在 include 了您应用目录的那个文件中进行这些更改。例如，node-custom-server 模板包含 tsconfig.json、tsconfig.node.json 和 tsconfig.vite.json。由于 tsconfig.vite.json 是那个包含了应用目录的文件，所以是它为路由模块类型安全设置了 .react-router/types。

3. 在类型检查前生成类型

如果您想将类型检查作为单独的命令运行——例如，作为持续集成（CI）管道的一部分——您需要确保在运行类型检查之前生成类型。

{
  "scripts": {
    "typecheck": "react-router typegen && tsc"
  }
}

4. 为 `AppLoadContext` 添加类型

扩展应用程序 `Context` 类型

要定义您应用的 context 类型，请在您项目中的一个 .ts 或 .d.ts 文件中添加以下内容

import "react-router";
declare module "react-router" {
  interface AppLoadContext {
    // add context properties here
  }
}

5. 仅限类型的自动导入（可选）

当自动导入 Route 类型助手时，TypeScript 将生成

import { Route } from "./+types/my-route";

但如果您启用了 verbatimModuleSyntax

{
  "compilerOptions": {
    "verbatimModuleSyntax": true
  }
}

那么，您也将自动获得导入的 type 修饰符

import type { Route } from "./+types/my-route";
//     ^^^^

这有助于像打包工具之类的工具检测到可以安全地从捆绑包中排除的仅限类型的模块。

总结

React Router 的 Vite 插件应该会在您每次编辑路由配置（routes.ts）时自动将类型生成到 .react-router/types/ 中。这意味着您只需运行 react-router dev（或您的自定义开发服务器）即可在您的路由中获取最新的类型。

查看我们的类型安全说明，了解如何将这些类型引入到您的路由中的示例。