TypeScript 的 Pick 與 Partial:精闢解說,告別混淆!
嗨,各位 TypeScript 愛好者!大家有沒有遇到過想要從一個既定的 Type 中挑選部分屬性,或是將所有屬性變成 Optional 的時候?這時候,Pick 和 Partial 這兩個 Utility Types 就派上用場啦!今天,我們就來好好聊聊這兩個常常被搞混的傢伙,保證讓你一聽就懂,一用就靈!
Pick:精準挑選,打造客製化 Type
Pick 的功能非常簡單直接,就是從既有的 Type 中「挑選」出你指定的屬性。想像一下,你面前有一大堆水果,你只需要蘋果和香蕉,Pick 就幫你把其他水果都挑走,只留下你想要的!
例如,我們有一個 Person Type:
interface Person {
name: string;
age: number;
address: string;
email: string;
}
如果你只想取得 name 和 age 屬性,就可以這樣做:
type NameAndAge = Pick;
// NameAndAge 的型別會是: { name: string; age: number; }
是不是很方便呢?
點我解鎖秘密!
Partial:通通變成 Optional,彈性十足
Partial 的功能就比較寬泛了,它會將既有 Type 的所有屬性都變成 Optional,也就是說,每個屬性都可以存在或不存在。想像一下,你有一張購物清單,上面所有的東西都可以選擇要買或不要買,Partial 就幫你把每個東西都標記成「可選」狀態。
延續上面的 Person Type,如果你想讓所有的屬性都可以是 Optional,就可以這樣做:
type PartialPerson = Partial;
// PartialPerson 的型別會是: { name?: string | undefined; age?: number | undefined; address?: string | undefined; email?: string | undefined; }
這樣,你就可以在建立 Person 物件時,只填寫一部分屬性,其他屬性可以省略。
立即探索更多!
Pick 與 Partial 的主要區別:一覽無遺
總結一下,Pick 讓你精準挑選想要的屬性,而 Partial 則讓你將所有屬性都變成 Optional。它們的應用場景也不同,Pick 適合於你需要建立一個只包含特定屬性的新 Type,而 Partial 適合於你需要建立一個可以包含部分屬性的 Type。
| 特性 | Pick | Partial |
|---|---|---|
| 功能 | 挑選指定屬性 | 將所有屬性變成 Optional |
| 適用場景 | 建立只包含特定屬性的 Type | 建立可以包含部分屬性的 Type |