[TS] 認識 TypeScript 中 的型別魔術師:Mapped Type
在 TypeScript 中,Mapped Type 是一個非常有趣的東西,一開始可能會覺得有點抽象,但一旦熟悉了它的概念後,Mapped Type 就像是「型別魔法師」一樣,可以根據型別組合出各種不同的型別,也就是說如果想要能夠靈活建立 Type 的話,Mapped Type 是一個一定要會的概念。
Index Signatures Type
在了解 Mapped Type 之前,需要先來看一下它的前身 Index Signatures Type。一般來說,在 TypeScript 裡定義物件的型別會需要把物件的每一個 key 和 value 的型別都定義清楚,像是這樣:
type Person = {
firstName: string;
lastName: string;
age: number;
};
但有些時候,因為一些原因,也許是 key 的名稱不是那麼重要時,或者 key 的可能太多事,我們可以使用 index signature type 來定義這個物件,例如,定義一個 key 為 string
,value 則為 string
或 number
的型別:
type PersonDict = {
// "key" 可以是取成任何名稱
[key: string]: string | number;
};
在 [key: string]
中的這個 key
可以是任何名稱,你也可以改成 [property: string]
效果是一樣的。
Mapped Type 和 in operator
在了解 index signatures type 後,就可以來初步認識 Mapped Type。而在 Mapped Type 中最重要的就是 in
這個關鍵字的使用。
先來看看 in
怎麼用:
type PersonMap = {
[key in 'firstName' | 'lastName']: string;
};