在本文中，我們將學(xué)習(xí)如何通過(guò)組合類型運(yùn)算符和枚舉來(lái)提取和聲明常量類型typeof，以使您的代碼庫(kù)得到優(yōu)化。keyof

先決條件

為了獲得更好的編碼體驗(yàn)，您應(yīng)該在 IDE 中安裝 TypeScript，例如VSCode。它將為您提供許多基本功能，例如錯(cuò)誤突出顯示、IntelliSense、linting 等...您還應(yīng)該安裝一些擴(kuò)展，例如JavaScript 和 TypeScript Nightly、ESLint等。

什么是typeof

在 TypeScript 中，我們可以用來(lái)typeof提取變量或?qū)傩缘念愋?，如下例所示?

``` const Name = { firstName: 'Maya', lastName: 'Shavin' };

let myName: typeof Name; ```

在上面的代碼中，我們使用myName從變量 中提取的類型來(lái)聲明變量Name，這將是一個(gè)具有兩個(gè)屬性 -firstName和 的對(duì)象lastName。當(dāng)鼠標(biāo)懸停myName在 IDE 中時(shí)，TypeScript 將向您顯示myName結(jié)論的類型Name，如以下屏幕截圖所示：

這里注意typeof，如果要提取類型的變量是一個(gè) Object，那么接收到的類型將是一個(gè)完整的類型結(jié)構(gòu)，并且每個(gè)屬性都有其類型(例如 type of 將有myName兩個(gè)字段 -?firstNameof typestring和lastNameof kind?string)。

另一個(gè)有價(jià)值的場(chǎng)景typeof是將其與ReturnType從函數(shù)中提取返回?cái)?shù)據(jù)的類型結(jié)合起來(lái)。為此，我們執(zhí)行以下操作：

1. 使用以下方法獲取聲明函數(shù)的函數(shù)類型typeof
2. 使用ReturnType<T>withT是步驟 1 中提取的類型來(lái)獲取 from 的返回值類型T。

下面的例子演示了如何提取返回類型decoupleName()

``` function decoupleName (name: string) { const [firstName, ...remaining] = name.split(" ");

return {
    firstName,
    lastName: remaining.reduce((text, word) => text ? `${text} ${word}` : word, '')
}

}

type NameObj = ReturnType ```

TypeScript 將自動(dòng)引用正確的類型NameObj，如下面的屏幕截圖所示：

此外，我們可以typeof在 TypeScript 中用作條件塊內(nèi)的類型保護(hù)，就像在 JavaScript 中一樣，盡管在這種情況下，它主要適用于string、object、function等基本類型...

現(xiàn)在我們了解了typeof它的用法。接下來(lái)我們就來(lái)探討一下keyof。

理解keyof

雖然typeof生成由變量表示的類型，但keyof采用對(duì)象類型并生成作為該變量鍵的自由聯(lián)合的類型，如下所示：

``` interface User { firstName: string; lastName: string; };

type UserKeys = keyof User ```

以上等同于以下聲明：

type UserKeys = "firstName" | "lastName"

但是，與 不同的是typeof，您不能keyof直接在變量上使用。對(duì)于以下代碼，TypeScript 將引發(fā)錯(cuò)誤：

``` const Name = { firstName: 'Maya', lastName: 'Shavin' };

type NameKeys = keyof Name; //error ```

要從對(duì)象變量(例如常量值的對(duì)象映射)中提取類型，我們需要結(jié)合keyof和typeof，我們接下來(lái)將學(xué)習(xí)這一點(diǎn)。

從對(duì)象的鍵(或?qū)傩?中提取typeOf

以下面的ImageVariables為例，它充當(dāng)修改圖像時(shí)使用的變量的映射：

export const ImageVariables = { width: 'w', height: 'h', aspectRatio: 'ar', rotate: 'a', opacity: 'o', } as const;

請(qǐng)注意，這里我們需要const對(duì)象末尾的 來(lái)將其指示為只讀。否則，TypeScript 將不允許我們從中提取類型，因?yàn)榇嬖陔S時(shí)修改對(duì)象內(nèi)部屬性的風(fēng)險(xiǎn)。

ImageVariables包含從其鍵到根據(jù)Cloudinary 機(jī)制轉(zhuǎn)換圖像時(shí)使用的匹配變量符號(hào)的映射。要根據(jù) 的屬性(或鍵)生成類型ImageVariables，我們執(zhí)行以下操作：

1. ImageVariables獲取代表使用的類型typeof

type ImageVariablesType = typeof ImageVariables

1. 根據(jù)類型的鍵提取新類型ImageVariablesType，使用keyof

type ImageFields = keyof ImageVariablesType

或者，我們可以將上述兩個(gè)步驟合二為一，如下所示：

type ImageFields = keyof typeof ImageVariables

就是這樣。我們現(xiàn)在有了ImageFieldstype，其中包含 的接受字段ImageVariables，如下面的屏幕截圖所示：

我們現(xiàn)在可以使用這個(gè)生成的類型，如下所示：

``` const transformImage = (field: ImageFields) => { const variable = ImageVariables[field]

//do something with it

} ```

通過(guò)基于 的屬性聲明類型ImageVariables，任何使用 的流程transformImage都是安全的，并且我們可以確保field傳遞的內(nèi)容始終需要存在于 中ImageVariables。否則，TypeScript 將檢測(cè)任何錯(cuò)誤并向用戶發(fā)出警報(bào)。

此外，Intellisense 將告知用戶可接受的值，限制傳遞錯(cuò)誤值的可能性。

順便說(shuō)一句，類型檢查的行為與hasOwnProperty()運(yùn)行時(shí)檢查類似，盡管它只發(fā)生在編譯時(shí)。

聽(tīng)起來(lái)很簡(jiǎn)單。如果我們想將鍵的值提取到ImageVariables新類型中怎么辦？我們接下來(lái)看一下。

從對(duì)象的鍵(或?qū)傩?的值中提取typeof

如果我們想從 的鍵值生成一個(gè)類型ImageVariables，我們可以執(zhí)行以下操作：

type VariableValues = typeof ImageVariables[ImageFields]

由于我們已經(jīng)聲明ImageVariablesType為 of 類型ImageVariables，因此我們可以將上面的內(nèi)容重寫為：

type VariableValues = ImageVariablesType[ImageFields]

通過(guò)上面的代碼，我們現(xiàn)在有了一個(gè)新類型，VariableValues它接受以下值：

從命名常量對(duì)象的值和鍵生成類型在許多情況下都是有利的，例如當(dāng)您必須使用各種數(shù)據(jù)映射并且標(biāo)準(zhǔn)鍵或值在它們之間進(jìn)行映射時(shí)。在對(duì)象映射上使用keyof和typeof可以幫助創(chuàng)建相關(guān)映射和類型之間的連接，從而避免潛在的錯(cuò)誤。

或者，我們可以結(jié)合枚舉 和typeof來(lái)實(shí)現(xiàn)相同的目標(biāo)。

使用枚舉

枚舉是聲明命名常量類型的一種方便且有組織的方式。它允許我們創(chuàng)建一組不同的常量值，并且每個(gè)枚舉字段都是基于數(shù)字或基于字符串的。我們可以重寫我們ImageVariables的如下：

enum EImageVariables { width = 'w', height = 'h', aspectRatio = 'ar', rotate = 'a', opacity = 'o', }

使用枚舉的優(yōu)點(diǎn)之一是我們可以使用枚舉的名稱作為接受值聲明的類型。因此，代替以下代碼：

``` type VariableValues = typeof ImageVariables[ImageFields]

function transform(value: VariableValues) { //perform something } ```

EImageVariables我們可以使用如下方式重寫：

function transform(value: EImageVariables) { //perform something }

對(duì)于更少的代碼，類型檢查執(zhí)行相同的操作。盡管如此，為了從聲明的 enum 的鍵(或?qū)傩?獲取類型，我們?nèi)匀恍枰癯Ｒ?guī)常量對(duì)象一樣EImageVariables使用組合：keyof typeof

type ImageFields = keyof typeof EImageVariables

就是這樣。上面的代碼產(chǎn)生的結(jié)果與我們使用ImageVariables.

現(xiàn)在讓我們回顧一下如何從常量對(duì)象的鍵和值獲取類型：

``` export const ImageVariables = { width: 'w', height: 'h', aspectRatio: 'ar', rotate: 'a', opacity: 'o', } as const;

type ImageVariablesType = typeof ImageVariables; type ImageFields = keyof ImageVariablesType; type VariableValues = ImageVariablesType[ImageFields]; ```

與使用枚舉相比：

``` enum EImageVariables { width = 'w', height = 'h', aspectRatio = 'ar', rotate = 'a', opacity = 'o', }

type EImageVariablesType = typeof EImageVariables; type EImageFields = keyof EImageVariablesType; //No need for getting the type of values ```

與常量對(duì)象一樣，我們可以直接使用枚舉鍵的值，例如EImageVariables.width在我們的代碼中。在運(yùn)行時(shí)，枚舉作為 JavaScript 對(duì)象存在于編譯后的代碼中，并且表現(xiàn)得像 JavaScript 對(duì)象。

一般來(lái)說(shuō)，枚舉是可以的。在 TypeScript 中，由于其實(shí)現(xiàn)方式效率低下(希望這個(gè)問(wèn)題已得到修復(fù)或會(huì)很短)，許多人認(rèn)為它對(duì)性能有影響。

那么我們應(yīng)該使用它們嗎？這取決于。這個(gè)選擇由你。

概括

在使用 TypeScript 時(shí)，我們經(jīng)常忽略類型運(yùn)算符，例如typeof或 ，keyof因?yàn)樗鼈兲跫?jí)了。然而，它們?cè)跇?gòu)建類型系統(tǒng)中發(fā)揮著重要作用。當(dāng)正確結(jié)合其他 TypeScript 語(yǔ)法時(shí)，它們可以幫助您的應(yīng)用程序開(kāi)發(fā)高級(jí)和復(fù)雜的類型。讓我們嘗試一下它們，看看它們能為您帶來(lái)什么。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512211.html