Typescript高級(jí)技巧-基本類(lèi)型中的const

使用對(duì)象初始化變量時(shí)，TypeScript 認(rèn)為該對(duì)象的屬性是可以被更改的。例如，如果您編寫(xiě)了這樣的代碼：

const obj = { counter: 0 };if (someCondition) {  obj.counter = 1;}

TypeScript 不會(huì)認(rèn)為把 counter 從0改為1是錯(cuò)誤的，只要 counter 符合數(shù)字類(lèi)型就可以。

function handleRequest (url: string, method: 'GET' | 'POST') {}
const req = { url: "https://example.com", method: "GET" };handleRequest(req.url, req.method);// 類(lèi)型“string”的參數(shù)不能賦給類(lèi)型“"GET" | "POST"”的參數(shù)。ts(2345)

在上面的示例中，req.method 被推斷為字符串，而不是“GET”。TypeScript認(rèn)為這段代碼有錯(cuò)誤。

有兩種方法可以解決這個(gè)問(wèn)題。

您可以通過(guò)在以下任一位置添加類(lèi)型斷言來(lái)更改推導(dǎo)的類(lèi)型：

// Change 1:const req = { url: "https://example.com", method: "GET" as "GET" };// Change 2handleRequest(req.url, req.method as "GET");

更改1意味著“我希望 req.method 始終具有文本類(lèi)型“GET”，從而防止在之后將“GUESS”分配給該字段。更改2意味著“我知道出于其他原因，req.method 具有值“GET”。

可以使用常量將整個(gè)對(duì)象轉(zhuǎn)換為基本值作為其類(lèi)型：

const req = { url: "https://example.com", method: "GET" } as const;handleRequest(req.url, req.method);

as const 后綴的作用類(lèi)似于 const，但對(duì)于類(lèi)型系統(tǒng)，確保所有屬性都分配了文字類(lèi)型，而不是更通用的基礎(chǔ)類(lèi)型，如字符串或數(shù)字。

這個(gè)最簡(jiǎn)單的聲明，Typescript 會(huì)推斷出 age 的類(lèi)型是 number，你可以對(duì)它賦任何數(shù)值。

let age = 30// age類(lèi)型為number

但如果我們使用const聲明這個(gè)變量，它的類(lèi)型會(huì)變成什么？

const age = 30// age類(lèi)型為30

可以看到 30 就變成它的類(lèi)型，而且再也無(wú)法更改。字符串也一樣，會(huì)有這種限制。

如果對(duì)一個(gè)數(shù)組使用 const 定義，情況就有點(diǎn)不一樣了，看下面的例子。它只是定義了 cars 為字符串?dāng)?shù)組類(lèi)型，你還是可以對(duì)數(shù)組進(jìn)行各種操作，比如插入一個(gè)數(shù)組元素之類(lèi)的。

const cars = ['A', 'B', 'C']// cars類(lèi)型為string[]

如果你想限定死數(shù)組，那就需要加 as const, 如下：

const cars = [1, 2, 3, 4, 5]// cars類(lèi)型為readonly ["A", "B", "C"]

對(duì)象和數(shù)組差不多，如果直接 const 定義，你還是可以直接修改對(duì)象的字段，除非加入 as const，這樣它會(huì)給每個(gè)字段加入 readonly, 并且使用基本值作為其類(lèi)型。