問題描述

在 TypeScript 中，我們經(jīng)常會遇到類似以下的代碼和錯誤。

為什么下面的代碼 goRoute(routers.admin) 會報錯？

const routers = {
  home: "/",
  admin: "/admin",
  user: "/user"
};

const goRoute = (r: "/" | "/admin" | "/user") => {};

goRoute(routers.admin); // 報錯行: 類型"string"的參數(shù)不能賦給類型'"/" | "/admin" | "/user"'的參數(shù)。

報錯如下圖：

為什么會出現(xiàn)這個錯誤？

1. 類型推斷機制

TypeScript 會對 routers 具體的字符串字面量類 會將對象字面量的屬性類型推斷為最寬泛的類型，即 string 類型。

所以 routers 的實際類型被推斷為：

{
  home: string;
  admin: string;
  user: string;
}

2. 函數(shù)參數(shù)要求具體字面量類型

goRoute 函數(shù)要求參數(shù)必須是三個具體的字符串字面量類型之一：'/' | '/admin' | '/user'。

3. 類型不匹配

當(dāng)我們嘗試傳遞 routers.admin（類型為 string）給 goRoute（需要 '/' | '/admin' | '/user'）時，TypeScript 會報錯，因為 string 比具體的字符串字面量類型更寬泛。

解決方案

方案 1：使用類型斷言

goRoute(routers.admin as "/admin");

這種方法簡單直接，但不夠安全，因為如果 routers.admin 的值后來被修改，類型斷言可能會掩蓋真正的錯誤。

方案 2：聲明 routers 為常量

const routers = {
  home: "/",
  admin: "/admin",
  user: "/user"
} as const;

as const 是 TypeScript 的常量斷言，它會告訴 TypeScript 將所有屬性值視為字面量類型，而不是 string 類型。

此時 routers 的類型變?yōu)椋?/p>

{
  readonly home: '/';
  readonly admin: '/admin';
  readonly user: '/user';
}

方案 3：顯式類型注解

interface Routes {
  home: "/";
  admin: "/admin";
  user: "/user";
}

const routers: Routes = {
  home: "/",
  admin: "/admin",
  user: "/user"
};

這種方法更顯式地定義了類型，適合更復(fù)雜的場景。

方案 4：使用類型提取

const routers = {
  home: "/",
  admin: "/admin",
  user: "/user"
};

type RouterValues = (typeof routers)[keyof typeof routers];

const goRoute = (r: RouterValues) => {};

這種方法動態(tài)地從 routers 對象中提取所有值的類型作為聯(lián)合類型。

最佳實踐

對于路由配置這種通常不會改變的結(jié)構(gòu)，推薦使用 as const 方案：

const routers = {
  home: "/",
  admin: "/admin",
  user: "/user"
} as const;
const goRoute = (r: "/" | "/admin" | "/user") => {};
goRoute(routers.admin);

這種方式的優(yōu)點：

1. 保持代碼簡潔
2. 類型安全
3. 易于維護（添加新路由時類型會自動更新）
4. 避免硬編碼類型

到此這篇關(guān)于TypeScript中類型收窄的具體使用的文章就介紹到這了,更多相關(guān)TypeScript 類型收窄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論