五個(gè)你應(yīng)該了解的高級(jí) TypeScript 類型體操
TypeScript 通過(guò)提供靜態(tài)類型系統(tǒng)改變了我們編寫 JavaScript 的方式，它幫助開(kāi)發(fā)者早期捕捉錯(cuò)誤并編寫更健壯的代碼。
但是，我們通常沒(méi)有充分發(fā)揮 TypeScript 的潛力。它不僅僅是定義簡(jiǎn)單的類型和接口。
在這篇文章中，我們將討論 5 個(gè)高級(jí) TypeScript API，它們將提升我們編寫 TypeScript 代碼的方式。
那么，讓我們開(kāi)始吧！
Pick
TypeScript 中的 Pick 實(shí)用類型是一個(gè)強(qiáng)大的特性，它允許我們通過(guò)選擇現(xiàn)有類型的一個(gè)子集來(lái)構(gòu)造新的類型。
當(dāng)我們需要從復(fù)雜數(shù)據(jù)中獲取某些字段時(shí)，這非常有用。它有助于提高可讀性并增強(qiáng)類型安全性。
Pick 的語(yǔ)法是：
Pick<Type, Keys>;- Type：這是我們將從中獲取屬性的原始類型。
- Keys：我們想要從類型中獲取的屬性。 （鍵由 | 分隔）
讓我們通過(guò)一個(gè)例子來(lái)理解它的用例：
假設(shè)，在我們的應(yīng)用程序中有一個(gè) BlogData 類型，如下所示：
type BlogData = {
title: 'string;';
description: 'string;';
author: string;
datePublished: string;
summary: string;
image?: string;
};在顯示博客卡片時(shí)，我們只需要 title、author 和 datePublished 屬性。為此，我們可以使用 Pick 創(chuàng)建一個(gè)只包含所需屬性的新類型 BlogCardData：
type BlogCardData = Pick<BlogData, 'title' | 'author' | 'datePublished'>;這里，BlogCardData 是一個(gè)包含 title、author 和 datePublished 屬性的新數(shù)據(jù)類型。它類似于以下類型：
type BlogCardData = {
title: 'string;';
author: string;
datePublished: string;
};總體而言，Pick 允許我們明確指定函數(shù)或組件期望哪些屬性，從而編寫出更易于維護(hù)和更少出錯(cuò)的代碼。
Partial
TypeScript 中的 Partial 實(shí)用類型用于通過(guò)使現(xiàn)有類型的全部屬性變?yōu)榭蛇x來(lái)創(chuàng)建新的類型。這在我們希望更新對(duì)象的部分屬性而無(wú)需提供整個(gè)對(duì)象時(shí)特別有用。
Partial 的語(yǔ)法是：
Partial<Type>;- Type：這是我們要從中創(chuàng)建新類型并使所有屬性變?yōu)榭蛇x的原始類型。
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)：
考慮我們之前展示的 BlogData 類型。
type BlogData = {
title: string;
description: string;
author: string;
datePublished: string;
summary: string;
image: string;
};現(xiàn)在，我們希望使 summary、image 和 description 屬性變?yōu)榭蛇x的。為此，我們將同時(shí)使用 Pick 和 Partial，如下所示：
// 使用 Pick 創(chuàng)建所需屬性的新類型
type BlogPickData = Pick<Type, 'description' | 'summary' | 'image'>;
// 使用 Partial 使 BlogPickData 的所有屬性變?yōu)榭蛇x
type BlogOptionalData = Partial<BlogPickData>;這里，我們首先創(chuàng)建了一個(gè)包含我們想要使可選的屬性的新數(shù)據(jù)類型 BlogPickData，然后使用 Partial 創(chuàng)建了 BlogOptionalData 類型來(lái)使這些屬性可選。
BlogOptionalData 類型類似于以下類型：
type BlogOptionalData = {
description: string;
summary: string;
image: string;
};總體而言，Partial 允許我們創(chuàng)建更靈活的類型，用于更新操作，同時(shí)仍然保持類型安全性。
Readonly
顧名思義，Readonly 實(shí)用類型將給定類型的全部屬性變?yōu)橹蛔x。這意味著當(dāng)我們使用此類型創(chuàng)建對(duì)象時(shí)，我們不能重新分配它們。
這在編寫配置對(duì)象、常量或任何我們不希望以后更改的敏感數(shù)據(jù)時(shí)非常有用（以避免錯(cuò)誤）。
Readonly 的語(yǔ)法是：
Readonly<Type>;- Type：這是我們要將所有屬性轉(zhuǎn)換為只讀的原始類型。
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)：
假設(shè)，我們有一個(gè)應(yīng)用程序的配置設(shè)置的配置類型：
type Config {
endpoint: string;
apiKey: string;
}現(xiàn)在我們將使用 Readonly 實(shí)用類型來(lái)使對(duì)象只讀。
const config: Readonly<Config> = {
endpoint: '<https://api.example.com>',
apiKey: 'arindam_1729',
};這將確保 Config 對(duì)象在創(chuàng)建后不能被修改。如果嘗試修改對(duì)象，它將導(dǎo)致 TypeScript 錯(cuò)誤。
注意：Readonly 實(shí)用類型確保屬性不能被更改，但僅在 TypeScript 級(jí)別。這意味著它是一個(gè)在編譯時(shí)工作的特性。TypeScript 編譯成的 JavaScript 沒(méi)有內(nèi)置的不可變性，因此 Readonly 規(guī)則在運(yùn)行時(shí)不適用。
總體而言，它有助于維護(hù)表示固定配置或常量的對(duì)象的完整性。
Exclude
Exclude 實(shí)用類型用于通過(guò)從聯(lián)合類型中排除某些不應(yīng)允許的成員來(lái)構(gòu)造類型。當(dāng)我們希望創(chuàng)建一個(gè)類型，它是另一個(gè)類型的子集，某些元素被移除時(shí)，這非常有用。
Exclude 的語(yǔ)法是：
Exclude<T, U>;- T：這是我們將從中排除屬性的原始類型。
- U：我們想要從聯(lián)合類型中排除的屬性。
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)：
假設(shè)我們有一個(gè)應(yīng)用程序，需要管理應(yīng)用程序中用戶角色的列表：
type UserRole = 'admin' | 'editor' | 'viewer' | 'guest';并且我們希望在特定操作中排除某些角色。為此，我們將使用 Exclude 實(shí)用類型：
type AllowedRoles = Exclude<UserRole, 'guest' | 'viewer'>;在這種情況下，AllowedRoles 是一個(gè)新創(chuàng)建的類型，包含 'admin' 和 'editor'。這類似于以下類型：
type AllowedRoles = 'admin' | 'editor';總體而言，Exclude 允許我們?yōu)樘囟ㄓ美?xì)化類型定義，增強(qiáng)代碼中的類型安全性和清晰度。
Record & Map
Record 實(shí)用類型和 TypeScript 中的 Map 對(duì)象提供了兩種強(qiáng)大的方式來(lái)處理鍵值對(duì)集合。
Record 實(shí)用類型用于構(gòu)造一個(gè)具有給定類型 T 的屬性集 K 的類型。
Record 的語(yǔ)法是：
Record<K, T>;- K：屬性集（鍵）。
- T：屬性的類型（值）。
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)：
假設(shè)，我們正在構(gòu)建一個(gè)管理用戶列表的應(yīng)用程序，用戶類型 User 如下：
type User {
id: string;
name: string;
}現(xiàn)在，我們將使用 Record 類型來(lái)定義 Users 類型：
// 使用 Record 來(lái)為具有字符串鍵和 User 值的對(duì)象進(jìn)行類型定義
type Users = Record<string, User>;這里，Record 創(chuàng)建了一個(gè)類型，其中鍵是字符串，值是 User 類型。
另一方面，TypeScript 中的 Map 對(duì)象（繼承自 JavaScript）是一個(gè)鍵值對(duì)的集合，其中鍵和值都可以是任何類型。
Map 的語(yǔ)法是：
Map<keyType, valueType>;- keyType：映射中的鍵的類型（例如，string、number）。
- valueType：映射中的值的類型。
在前面的例子中，我們可以使用 Map 來(lái)實(shí)現(xiàn)這一點(diǎn)：
type User {
id: string;
name: string;
}
// 初始化一個(gè)空的 Map，具有字符串鍵和 User 值
const usersMap = new Map<string, User>();
// 將用戶添加到 Map 中
usersMap.set('user1', { id: '1', name: 'Arindam' });
// 從 Map 中檢索用戶
const user = usersMap.get('user1');Map 提供了像 .set 這樣的方法來(lái)添加鍵值對(duì)，以及像 .get 這樣的方法通過(guò)鍵檢索值。
總體而言，Record 和 Map 都增強(qiáng)了 TypeScript 處理數(shù)據(jù)集合的能力，同時(shí)保持類型安全性。
結(jié)論
如果你覺(jué)得這篇博文對(duì)你有幫助，請(qǐng)考慮將其分享給可能受益的其他人。你也可以關(guān)注我以獲取更多關(guān)于 JavaScript、React 和其他 Web 開(kāi)發(fā)主題的內(nèi)容。
