【TS】1368- 秒懂 TypeScript 泛型工具類型！
阿寶哥精心準(zhǔn)備的《輕松學(xué) TypeScript》 視頻教程已經(jīng)更新到第十九期了，合集播放量已達(dá) 14W+。通過形象生動的動畫，讓你輕松搞懂 TypeScript 的難點(diǎn)和核心知識點(diǎn)！
如果你剛接觸 TypeScript 不久，在閱讀 TypeScript 內(nèi)置工具類型的用法和內(nèi)部實(shí)現(xiàn)的文章時，可能會看到 Pick 工具類型，對于該類型的語法你可能會感到陌生。
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
type User = {
id: number;
name: string;
address: string;
};
type PickedUser = Pick<User, "id" | "name">;
其實(shí)學(xué)習(xí)新事物一種比較好的方式是使用類比。接下來阿寶哥將借助 JavaScript 中的函數(shù)來幫助你快速理解 Pick 工具類型背后的語法。
function Pick(obj, keys) {
const ret = {};
for (const key of keys) {
ret[key] = obj[key];
}
return ret;
}
const user = {
id: 666,
name: "阿寶哥",
address: "廈門",
};
const PickedUser = MyPick(user, ["id", "name"]);在以上代碼中，function 是關(guān)鍵字用于聲明函數(shù)，Pick 是函數(shù)名稱，而小括號內(nèi)的 obj 和 keys 是參數(shù)，大括號中定義的是函數(shù)體。
而對于 Pick 工具類型來說，type 關(guān)鍵字用于給類型取個別名，方便重復(fù)使用，Pick 就是類型的名稱。尖括號內(nèi)的 T 和 K 屬于類型參數(shù)，與 JavaScript 函數(shù)中參數(shù)的區(qū)別是類型參數(shù)存儲的是類型，而 JavaScript 函數(shù)參數(shù)存儲的是值。
其中 extends 是泛型約束的語法，用于約束類型的范圍。 大括號中是該工具類型的具體實(shí)現(xiàn)，它使用了 TypeScript 映射類型的語法。
其實(shí)，你可以把 TypeScript 內(nèi)置的工具類型理解成特殊的函數(shù)，它們被用于處理 TypeScript 中存在的類型。調(diào)用工具類型的方式與調(diào)用 JavaScript 函數(shù)的區(qū)別是使用的是尖括號。
最后，為了便于大家理解，阿寶哥以圖片的形式來演示一下 Pick 工具類型的執(zhí)行過程。
如果你想詳細(xì)了解映射類型，可以觀看 “用了 TS 映射類型，同事直呼內(nèi)行！” 這篇文章。
掃碼查看 輕松學(xué) TypeScript 系列視頻教程
（目前已更新 19 期）
你喜歡以這種形式學(xué) TS 么？喜歡的話，記得點(diǎn)贊與收藏喲。