在 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: 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;
};
這裡和 index signatures
類似,你一樣會看到像是 [key:
... ] 這樣的寫法,key
一樣是可以自己取的變數名稱,而不一樣的是多了
in 這個關鍵字。
這個 in
的感覺非常「類似」在 JavaScript 中 Array 的
for...of 方法,上面的 [key in
'firstName' | 'lastName']
可以想成是這樣的感覺:
for (const key of ['firstName', 'lastName']) {
console.log(key);
}
在 for (const key of ...) 中,這個 key
會是每次疊代時陣列取得的元素值,所以這裡的話第一次會是
firstName,第二次會是 lastName。
回到 Mapped Type 中的 [key in 'firstName'
| 'lastName'],這裡的 key
也是很類似的概念,可以想像成會跑一個迴圈,第一次
key 的值會是 firstName,第二次的值則是 lastName。
也就是說,上面的:
type PersonMap = {
[key in 'firstName' | 'lastName']: string;
};
其實就是:
type PersonMap = {
firstName: string;
lastName: string;
};
Tip:
把 Mapped Type 中的 key in ...
想成是類似 for (const key of ...)
的概念,是我認為理解 mapped type
最重要的一步。它都有跑一個迴圈把所有元素依序取出來的概念。
由於 key
只是一個變數名稱,它也可以命名成其他名稱,又因為它表示的是物件屬性(property),所以也很常會用
P
來表示它,例如下面建立另一個
mapped type:
type Device = {
[P in 'apple' | 'samsung' | 'google']: string;
};
如果了解剛剛的說明的話,應該可以想到,這裡
P 就會依序是 apple、samsung 和 pixel,出來的型別會等同於:
type Device = {
apple: string;
samsung: string;
pixel: string;
};
這裡你也可以理解到 mapped type 和
indexed signature 的差別,mapped type 可以視為是 indexed
signatures
的子集合(subset),它能將物件的屬性定義的更明確,而不是單純用某個型別來表示:
type DeviceDict = {
[key: string]: string;
};
type DeviceMap = {
[P in 'apple' | 'samsung' | 'google']: string;
};
單純看到這裡,可能還是感受不到為什麼會說
Mapped Type
是可以用來操作型別的「型別魔術師」,只會覺得
Mapped Type
單純只是可以「跑回圈」用的。
要讓 Mapped Type
發揮它強大的功力前,還需要了解另外一個重要的東西是
Keyof Type Operator。
Keyof Type Operator
keyof
的作用其實很直觀,就是把物件的
key 給取出來:
type Person = {
firstName: string;
lastName: string;
age: number;
isMarried: boolean;
};
type PersonKeys = keyof Person;
基本上這個 PersonKeys
就會是所有 Person 物件 Key
的聯集,這裡就是 firstName | lastName | age
| isMarried:
Tip:
在 TypeScript 中,object key 的型別可能是
string、number 或 symbol,所以如果使用 keyof
any 得到的型別就會是 string | number |
symbol。
Mapped Type
搭配 keyof 的組合技
再了解 Mapped Type 和 Keyof Operator Type
之後,就可以使用這兩個的組合技。
範例一
假設現在我們定義了一系列的事件:
type SupportedEvent = {
click: string;
change: string;
keyup: string;
keydown: string;
};
這時候如果想根據 SupportedEvent
中屬性的名稱,產生一個新的型別叫做
HandledEvent,但物件 value
的型別要全部換成 function
的話,我們當然可以如同過去一個一個把屬性定義出來:
type HandledEvent = {
click: () => void;
change: () => void;
keyup: () => void;
keydown: () => void;
};
但這麼做除了很麻煩之外,未來如果有新增支援的事件類型到
SupportedEvent
的話,還需要同時記得加到 HandledEvent
這個型別中,如果忘記加的話,兩個型別中支援的
Event 類型就會不一致。
這時候使用 Mapped Type 搭配 keyof
就會非常的方便:
type HandledEvent = {
[K in keyof SupportedEvent]: () => void;
};
寫成這樣就搞定了,未來如果
SupportedEvent 中有新增的事件類型是,HandledEvent
也不需要額外改動。
現在來了解一下我們剛剛的組合技是怎麼使用的。
首先要注意到的是 [K in keyof
SupportedEvent]:
- 前面有提到 K
只是一個變數名稱,會對應到的是
in 後面每次取出來的值。
接著把注意力放到 in
後面的內容,它是 keyof SupportedEvent
- 搭配前面對於 keyof
的理解,可以知道 keyof
SupportedEvent,對應到也就會是 click |
change | keyup | keydown
也就是說如果換成 JavaScript for ... of
的方法,它會像是這樣:
for (const K of ['click', 'change', 'keyup', 'keydown']) {
}
這樣你就可以知道,K 其實對應到的就會是 click、change、keyup 和
keydown。
再來是 [K in keyof SupportedEvent]: () => void;
中 : 後的內容就會是物件 value
的型別。因為我們想要把它改成
function,所以就在後面放了 () =>
void。
範例二
讓我們來看另一個 Mapped Typed + keyof
的例子,假設我們現在定義了一個
PersonMethod,它的 value
可能有很多不同的型別:
type PersonMethod = {
greet: (name: string) => string;
age: number;
isMarried: boolean;
name: string;
};
這時候需要定義一個 PersonMethodOptions
的型別,它的屬性名稱會和 PersonMethod 相同,但 value 的型別都是
boolean,用來表示要不要開關這個功能,這時候如果不會使用
Mapped Type
的話,我們可能會一個一個將屬性重複定出:
type PersonMethodOptions = {
greet: boolean;
age: boolean;
isMarried: boolean;
name: boolean;
};
如同前一個範例一樣,一旦 PersonMethod
中有添加新的方法,你就需要把這個方法也記得添加到
PersonMethodOptions,否則就會有不一致的情況。
但如果會使用 Mapped Type 搭配 keyof
的話,只要這樣就可以搞定了:
type PersonMethodOptions = {
[P in keyof PersonMethod]: boolean;
};
至於為什麼這樣寫就可以,可以按照前一個範例的說明,試著思考看看。
P 不只是變數
在剛剛上面的範例中,我們分別使用了:
type HandledEvent = {
[K in keyof SupportedEvent]: () => void;
};
type PersonMethodOptions = {
[P in keyof PersonMethod]: boolean;
};
不論是 K 或 P
有說到它都只是個變數名稱,要取名成什麼都可以,但實際上它也不單單只是個名稱,它還可以被拿來使用,舉例來說,我們可以把它當成
: 後的型別,像是這樣:
type HandledEvent = {
[K in keyof SupportedEvent]: K;
};
type PersonMethodOptions = {
[P in keyof PersonMethod]: P;
};
至於對應出來的型別結果會是什麼,大家可以自己嘗試看看,相信會可以加深你對
Mapped Type in 這個關鍵字的理解。
進階:使用 as 把物件 key
的名稱也做轉換
剛剛上面的範例中,我們大部分是保留原本物件的屬性名稱,只針對物件
value
的型別作轉換,但實際上,我們甚至也可以去轉換物件
key 的名稱。這裡會用到 TypeScript 中 Template
Literal Types 和 as 的概念。
as 則可以讓我們在 Mapped
Type 中改變物件 key 的名稱。
以上面我們用過 SupportedEvent 當作範例:
type SupportedEvent = {
click: string;
change: string;
keyup: string;
keydown: string;
};
在 React 中,很常會使用 handleXXX
來作為方法的命名,這時候如果想要根據
SupportedEvent 的屬性 key
,但產生的是新的
keyName,變成都是以 handle
當作前綴時,除了可以自己一個一個打,像下面這樣之外:
type HandleEvent = {
handleClick: () => void;
handleChange: () => void;
handleKeyup: () => void;
handleKeydown: () => void;
};
也可以利用 Mapped Type
的觀念,這樣寫就可以了:
type HandleEvent = {
[P in keyof SupportedEvent as `handle${Capitalize<P>}`]: () => void;
};
如此也不用擔心未來 SupportedEvent 用新的 Type
加進去卻忘了補進 HandleEvent
的情況。
要理解上面的語法,一樣可以一步一步來,首先知道
P
是一個變數名稱,它可以拿到的是每次疊代時
keyof 後的內容,接著 as
的意思是我要把這個物件的 key
換一個名稱,換成的名稱是 `handle${Capitalize<P>}`。
首先因為 P in keyof SupportedEvent
,所以你會知道 P
其實就是 click、change、keyup 和 keydown。
as
後面則是我們希望的新名稱是什麼,如果我們只是寫
`handle${P}` 的話,轉出來的 key name
會是
handleclick、
handlechange、
handlekeyup 和
handlekeydown,但因為我們希望 handle
後的第一個字母要大寫,所以這個範例中有用了
TypeScript 內建的
Capitalize 這個 type
utility,它的作用是幫我們把
P
的第一個字變成大寫,於是轉出來的
key 名稱就會是我們想要的
handleClick、
handleChange、...。
後記
這裡提到的只是 Mapped Type 搭配 keyof 做出的變化,Mapped Type
也很常會搭配 Indexed Access Type 和 Condition
Types
做出更多的組合應用,這也就是為什麼
Mapped Type
可以稱作是「型別魔法師」的重要地位了。
另外,上面提到的寫法也多可以透過泛型(Generic)抽成自己的
utility type 來做重複的應用。
未來有機會的話會在來分享 Mapped Type
搭配其他組合技做出的更多應用。
範例程式碼
最後附上這篇文章中有用到的
Code 供大家參考。
參考資料