iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
自我挑戰組

React 開發者的 TypeScript 探索之旅系列 第 29

【 Day 29 】Exclude, Extract, NonNullable

  • 分享至 

  • xImage
  •  

今天我們要來介紹三個非常實用的 TypeScript Utility Types,它們分別是 ExcludeExtract 以及 NonNullable。這些工具可以幫助我們在處理 Union 型別時,根據需求排除、提取或移除特定的型別。透過這些工具,我們可以讓型別定義更加精確,並且避免不必要的錯誤發生。


Exclude

Exclude 是用來從 Union 型別中排除不需要的型別。當我們只想要 Union 型別的一部分時,可以使用 Exclude 來移除某些特定的型別。

例如,我們有一個 Union 型別表示餐廳的不同狀態,但我們不想要處理其中的 Closed 狀態時,可以使用 Exclude 來排除它:

type RestaurantStatus = 'Open' | 'Closed' | 'UnderConstruction'

type ActiveStatus = Exclude<RestaurantStatus, 'Closed'>
// ActiveStatus 為 'Open' | 'UnderConstruction'

在這個例子中,我們使用 ExcludeClosed 排除,這樣 ActiveStatus 只會包含我們需要的兩個狀態。


Extract

ExtractExclude 剛好相反,它用來從 Union 型別中提取特定的型別。這非常適合用在我們只想要某些特定型別的情況下。

假設我們有一個 Union 型別,包含餐廳的不同資料型別,但我們只想提取其中的 string 型別,可以使用 Extract 來達到這個目的:

type RestaurantInfo = string | number | boolean

type StringInfo = Extract<RestaurantInfo, string>

在這個例子中,Extract 幫助我們從 Union 型別中提取了 string 型別,讓我們能夠更加專注於處理字串資料。


NonNullable

NonNullable 是用來移除型別中的 nullundefined。當我們確定某個值不應該是 nullundefined 時,可以使用 NonNullable 來確保該型別不包含這些空值。

例如,我們有一個 Union 型別可能包含 nullundefined,但我們想確保使用時不會接收到空值,就可以用 NonNullable 來移除它們:

type RestaurantName = string | null | undefined

// ValidRestaurantName 為 string
type ValidRestaurantName = NonNullable<RestaurantName>

透過使用 NonNullable,我們可以保證 ValidRestaurantName 不會包含 nullundefined,這樣可以減少不必要的空值檢查。


總結來說,ExcludeExtractNonNullable 這三個工具類型能夠讓我們更靈活地操作 Union 型別,根據需求排除不需要的型別、提取需要的型別,或移除 nullundefined。這不僅可以使型別定義更精確,也能幫助我們在開發過程中避免錯誤。


上一篇
【 Day 28 】Partial, Required, Readonly
下一篇
【 Day 30 】結語
系列文
React 開發者的 TypeScript 探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言