路由模組類型安全

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";
//     ^^^^

這有助於 bundler 等工具偵測可以安全地從套件中排除的純類型模組。

結論

React Router 的 Vite 外掛程式應在您編輯路由設定 (routes.ts) 時自動將類型產生到 .react-router/types/ 中。這表示您只需要執行 react-router dev (或您的自訂開發伺服器) 即可在您的路由中取得最新的類型。

查看我們的類型安全說明，以取得如何將這些類型拉入您的路由的範例。