問(wèn)題描述

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

為什么下面的代碼 goRoute(routers.admin) 會(huì)報(bào)錯(cuò)？

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

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

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

報(bào)錯(cuò)如下圖：

為什么會(huì)出現(xiàn)這個(gè)錯(cuò)誤？

1. 類型推斷機(jī)制

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

所以 routers 的實(shí)際類型被推斷為：

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

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

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

3. 類型不匹配

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

解決方案

方案 1：使用類型斷言

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

這種方法簡(jiǎn)單直接，但不夠安全，因?yàn)槿绻?routers.admin 的值后來(lái)被修改，類型斷言可能會(huì)掩蓋真正的錯(cuò)誤。

方案 2：聲明 routers 為常量

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

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

此時(shí) 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ù)雜的場(chǎng)景。

方案 4：使用類型提取

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

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

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

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

最佳實(shí)踐

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

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

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

1. 保持代碼簡(jiǎn)潔
2. 類型安全
3. 易于維護(hù)（添加新路由時(shí)類型會(huì)自動(dòng)更新）
4. 避免硬編碼類型

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

最新評(píng)論