路由模块类型安全

React Router 生成特定于路由的类型，以增强对 URL 参数、加载器数据等的类型推断。如果您没有从模板开始，本指南将帮助您进行设置。

要了解有关 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 文件，则需要在包含应用程序目录的任何一个文件中进行这些更改。例如，node-custom-server 模板包含 tsconfig.json、tsconfig.node.json 和 tsconfig.vite.json。由于 tsconfig.vite.json 是包含应用程序目录的那个，所以它是为路由模块类型安全设置 .react-router/types 的文件。

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

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

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

4. 只用于类型的自动导入（可选）

当自动导入 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（或你自定义的开发服务器）即可在你的路由中获得最新的类型。

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