路由模块类型安全

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

查看我们的 类型安全解释，了解如何将这些类型拉入您的路由的示例。