TypeScript 常見的 Utility Types

janlin002
6 min readOct 12, 2023
Photo by Joan Gamell on Unsplash

這篇主要會以筆記的形式來紀錄,主要是因為常常在工作中只記得名字但忘記怎麼用,所以把幾個常用的 Utility Types 記錄起來 (範例基本上都是官網的範例),方便自己之後可以來查一下寫法,並希望可以幫助到有需要的人

什麼是 Utility Types?

相信大家都知道什麼是 Generics,Generics 是 TypeScript 的一項功能,允許我們編寫可重複使用的類型。

那跟 Utility Types 有什麼關係?其實 Utility Types 全部都是 Generics ,它幫助我們在寫 TypeScript 可以更輕鬆的面對各式各樣的型別樣式

下面我就會準備幾個常見的 Utility Types 跟大家分享

Pick<Type, Keys>

介紹:

Pick會從 Type 中挑選屬性集 Keys 來建立一個新的型別,Keys 可以是一個字串字面或字串字面的聯合。Keys 的值必須是 Type 的鍵,否則 TypeScript 就會報錯。

使用時機:

當你想通過從有很多屬性的型別物件中挑選某些屬性來建立新的型別物件時,這個實用型別特別有用。

舉個🌰:

Omit<Type, Keys>

介紹:

OmitPick 剛好相反。 Keys 是指出要省略的屬性鍵值。

使用時機:

當我們只想從某一型別物件中刪除某些屬性並保留其他屬性時,這個會更有用。

舉個🌰:

Partial<Type>

介紹:

Partial 構造了一個型別,其所有的型別屬性都設定為可選。

使用時機:

當我們在編寫一個型別物件但有些欄位是未知時,或許可以考慮使用 Partial

舉個🌰:

Required<Type>

介紹:

RequiredPartial 完全相反,Required 構造了一個型別,將其所有的型別屬性都設定為必填。

使用時機:

當確定資料形式,並且每一筆資料都一定需要時,可以考慮使用 Required

舉個🌰:

Readonly<Type>

介紹:

Readonly 構建了一個型別,其型別的所有屬性被設定為唯讀 readonly

使用時機:

如果資料不希望再被重新賦值,可以使用 Readonly 做多一層的保護

舉個🌰:

Record<Keys, Type>

介紹:

Record 是專門定義 值鍵對 ( key-value ) 的物件型別,前面的 keys 是定義 key 後面的 Type 是定義 value

使用時機:

當需要定義 key-value object 時非常好用

舉個🌰:

ReturnType<Type>

介紹:

ReturnType 會回傳 Type 的回傳值

使用時機:

目前想不到

舉個🌰:

Extract<Type, Union>

介紹:

透過 Extract 可以找到 Type, Union 的交集,並組成新的型別物件,需特別注意的是Union 不一定要視實際的值,也可以是型別

使用時機:

目前想不到

舉個🌰:

Exclude<UnionType, ExcludedMembers>

介紹:

Exclude 恰好跟 Extract 完全相反,一個是差集的概念,另一個是交集的概念

使用時機:

目前想不到

舉個🌰:

參考文章

--

--