秒懂 TypeScript 泛型工具類型!
如果你剛接觸 TypeScript 不久,在閱讀 TypeScript 內置工具類型的用法和內部實現的文章時,可能會看到 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">;
其實學習新事物一種比較好的方式是使用類比。接下來阿寶哥將借助 JavaScript 中的函數來幫助你快速理解 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 是關鍵字用于聲明函數,Pick 是函數名稱,而小括號內的 obj 和 keys 是參數,大括號中定義的是函數體。
而對于 Pick 工具類型來說,type 關鍵字用于給類型取個別名,方便重復使用,Pick 就是類型的名稱。尖括號內的 T 和 K 屬于類型參數,與 JavaScript 函數中參數的區別是類型參數存儲的是類型,而 JavaScript 函數參數存儲的是值。
?其中 extends 是泛型約束的語法,用于約束類型的范圍。 大括號中是該工具類型的具體實現,它使用了 TypeScript 映射類型的語法。?
其實,你可以把 TypeScript 內置的工具類型理解成特殊的函數,它們被用于處理 TypeScript 中存在的類型。調用工具類型的方式與調用 JavaScript 函數的區別是使用的是尖括號。
最后,為了便于大家理解,阿寶哥以圖片的形式來演示一下 Pick 工具類型的執行過程。
如果你想詳細了解映射類型,可以觀看 “??用了 TS 映射類型,同事直呼內行!”?? 這篇文章。