知識(shí)回調(diào)（不懂就看這兒！）

有關(guān)TypeScript的相關(guān)知識(shí)可以前往TypeScript知識(shí)專(zhuān)欄查看復(fù)習(xí)??！

場(chǎng)景復(fù)現(xiàn)

最近在前端的深入學(xué)習(xí)過(guò)程中，接觸了與網(wǎng)絡(luò)請(qǐng)求相關(guān)的內(nèi)容，于是計(jì)劃用三個(gè)專(zhuān)欄（HTTP、Axios、Ajax）和零碎文章總結(jié)記錄最近的學(xué)習(xí)筆記。由于項(xiàng)目前端技術(shù)棧的腳本語(yǔ)言為TypeScript，在研讀小程序異步請(qǐng)求封裝部分的代碼時(shí)，碰到了幾個(gè)關(guān)于TypeScript的小知識(shí)點(diǎn)不太清楚。

問(wèn)題代碼截圖：

因此，本文以 TypeScript中的typeof()、keyof() 為主要內(nèi)容展開(kāi)講解。

核心干貨??????

舉例引入

在使用TypeScript的時(shí)候，我們經(jīng)常會(huì)類(lèi)似下面的例子一樣編寫(xiě)代碼：??????

// 定義一個(gè)枚舉類(lèi)型的對(duì)象
enum ColorsEnum {
    white = '#ffffff',
    black = '#000000',
}
// 定義Colors類(lèi)型 里面的值只能是ColorsEnum中的值
type Colors = keyof typeof ColorsEnum;

最后一行代碼等價(jià)于：

type Colors = "white" | "black" // Colors的值只能是“white”和“black”中的一個(gè)

那么其中keyof typeof是如何工作的呢？下面我們開(kāi)始切入正題，開(kāi)始詳細(xì)講述。

想要理解TypeScript里的keyof typeof是如何工作的，首先需要理解什么是“字面量類(lèi)型（literal types）”和“聯(lián)合字面量類(lèi)型（union of literal types）”，下面我們來(lái)解釋一下這兩個(gè)概念，再來(lái)詳細(xì)介紹keyof和typeof，最后回到enum來(lái)回答上面的問(wèn)題。

字面量類(lèi)型（literal types）

Typescript 中的字面量類(lèi)型是更具體的 string, number 或 boolean 類(lèi)型。比如 "Hello World" 是一個(gè) string，但是 string 類(lèi)型不是 "Hello World"， "Hello World" 是 string 類(lèi)型的一個(gè)更具體的類(lèi)型，所以它是一個(gè)字面量類(lèi)型。

一個(gè)字面型變量可以這樣被定義：

type Greeting = "Hello"

這意味著 Greeting 類(lèi)型的對(duì)象只能有一個(gè)字符串值 "Hello"，并且沒(méi)有其他 string 類(lèi)型的值，或者其他任何類(lèi)型的值，就像是下面代碼說(shuō)的一樣：

let greeting: Greeting
greeting = "Hello" // OK
greeting = "Hi"    // Error: Type '"Hi"' is not assignable to type '"Hello"'

字面量類(lèi)型本身并不是很有用，但是當(dāng)它和聯(lián)合類(lèi)型（union types）、類(lèi)型別名（type aliases）、類(lèi)型保護(hù)（type guards）組合起來(lái)后，它就會(huì)變得很強(qiáng)大。

下面是聯(lián)合字面量類(lèi)型的例子：??????

type Greeting = "Hello" | "Hi" | "Welcome"

現(xiàn)在 Greeting 類(lèi)型對(duì)象的值可以是 "Hello", "Hi" 或者 "Welcome"

let greeting: Greeting
greeting = "Hello"       // OK
greeting = "Hi"          // OK
greeting = "Welcome"     // OK
greeting = "GoodEvening" // Error: Type '"GoodEvening"' is not assignable to type 'Greeting'

keyof單獨(dú)使用

假設(shè)現(xiàn)在有一個(gè)類(lèi)型 T（泛型），keyof T 將會(huì)給你一個(gè)新類(lèi)型，它是我們前面提到的聯(lián)合字面量類(lèi)型，并且組成它的字面量類(lèi)型是 T 的屬性名稱(chēng)。最后生成的類(lèi)型是字符串的子類(lèi)型。

比如來(lái)看下下面的 interface：??????

interface Person {
    name: string
    age: number
    location: string
}

在 Person 類(lèi)型上使用 keyof，將會(huì)得到一個(gè)新類(lèi)型，如下面代碼所示：??????

type SomeNewType = keyof Person

SomeNewType 是一個(gè)聯(lián)合字面量類(lèi)型("name" | "age" | "location")，它是由 Person 的屬性組成的類(lèi)型。

現(xiàn)在，你可以創(chuàng)建 SomeNewType 類(lèi)型的對(duì)象了：??????

let newTypeObject: SomeNewType

newTypeObject = "name"           // OK
newTypeObject = "age"            // OK
newTypeObject = "location"       // OK
newTypeObject = "anyOtherValue"  // Error...Type '"anyOtherValue"' is not assignable to type 'keyof Person'

keyof typeof同時(shí)使用

typeof 運(yùn)算符為你提供對(duì)象的類(lèi)型，上面例子中 Person interface，我們已經(jīng)知道它的類(lèi)型，所以我們只需要在 Person 上使用 keyof 操作符。
但是，當(dāng)我們不知道對(duì)象的類(lèi)型，或者我們只有一個(gè)值，類(lèi)似于下面的情況，應(yīng)該怎么辦呢？

const bmw = { name: "BMW", power: "1000hp" }

這就是我們需要一起使用 keyof typeof 的地方。typeof bmw 給到你他們的類(lèi)型 { name: string, power: string }

接著 keyof 操作符給到你聯(lián)合字面量類(lèi)型，像下面代碼描述的一樣：??????

type CarLiteralType = keyof typeof bmw

let carPropertyLiteral: CarLiteralType
carPropertyLiteral = "name"       // OK
carPropertyLiteral = "power"      // OK
carPropertyLiteral = "anyOther"   // Error...Type '"anyOther"' is not assignable to type '"name" | "power"'

在enum上使用keyof typeof

在 Typescript 中，enum 在編譯時(shí)被用作類(lèi)型，用來(lái)實(shí)現(xiàn)常量的類(lèi)型安全，但是它們?cè)谶\(yùn)行時(shí)被視為對(duì)象。這是因?yàn)椋?em>當(dāng) Typescript 代碼被編譯為 Javascript 時(shí)，它們會(huì)被轉(zhuǎn)換為普通對(duì)象。

接著我們回顧一下，最開(kāi)始我們提出問(wèn)題的例子是這樣的：??????

enum ColorsEnum {
    white = '#ffffff',
    black = '#000000',
}

這里 ColorsEnum 在運(yùn)行時(shí)作為一個(gè)對(duì)象存在，不是一個(gè)類(lèi)型，所以，我們需要一起使用 keyof typeof 這兩個(gè)操作符，像下面代碼展示的一樣。

type Colors = keyof typeof ColorsEnum

let colorLiteral: Colors
colorLiteral = "white"  // OK
colorLiteral = "black"  // OK
colorLiteral = "red"    // Error...Type '"red"' is not assignable to type '"white" | "black"'

以上就是關(guān)于==TypeScript中的typeof()、keyof()==的分享，相信看完這篇文章的小伙伴們一定有了一定的收獲。當(dāng)然，可能有不足的地方，歡迎大家在評(píng)論區(qū)留言指正！

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-420519.html

到了這里，關(guān)于一篇文章讓你搞懂TypeScript中的typeof()、keyof()是什么意思的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！