[Day16] TS:在 Mapped Type 中修改物件的 property modifiers:理解 Partial、Required 和 Readonly 的實作
這是我們今天要聊的內容,老樣的,如果你已經可以輕鬆看懂,歡迎直接左轉去看同事 Kyle 的精彩文章 — 「今晚,我想來點 Web 前端效能優化大補帖!」。
在 Day14 我們理解了如何透過 Mapped Type 修改物件型別中屬性的 value,在 Day15 中我們則理解了如何透過 Mapped Type 來修改物件型別中屬性的 key,看起來好像已經能完整操作物件型別了,但等等,在 TypeScript 的物件型別中還有一個是 Property Modifiers(屬性修飾符)。
Property Modifiers
屬性修飾符(Property Modifiers)這個詞你可能沒聽過,但應該一定用過,像是透過在屬性名稱後面加上 ?
讓該屬性變成是 optional 的,或是透過 readonly
讓該屬性在 type-checking 時不能被修改,另外像是 Day14 提過的 Index Signatures 也算是 Property Modifiers 的一種:
// Property Modifiers: ?, readonly
interface Person {
firstName: string;
lastName?: string; // lastName is optional
readonly age: number; // you should not mutate the age
}
Mapped Modifiers
在知道 Property Modifiers 後,讓我們來看看如何透過 Mapped Types 來修改屬性的 Property Modifiers。
如果要在 Mapped Types 中添加或移除 Property Modifiers 的話(像是把所有的屬性都變成 optional),需要用到 +
或 -
,預設沒寫的話就是 +
,來看下面幾個例子。