iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
自我挑戰組

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

【 Day 28 】Partial, Required, Readonly

  • 分享至 

  • xImage
  •  

今天我們要繼續介紹 TypeScript 的 Utility Types。這次要探索的是 PartialRequired 以及 Readonly,這些工具類型能夠讓我們更靈活地控制物件型別的屬性行為,例如讓屬性變得可選、變為必填或設為唯讀。透過這些工具,可以讓程式碼更具彈性,並減少重複定義型別的麻煩。


Partial

Partial 用來將一個物件型別的所有屬性變為可選。當我們不確定某些屬性是否必須存在時,就可以使用 Partial 來將所有屬性設為可選。

假設我們有一個 Restaurant 型別,當我們只想部分更新餐廳的資料時,可以使用 Partial 來使得更新資料的屬性不必全部填寫:

type Restaurant = {
  id: number
  name: string
  address: string
  phone: string
  rating: number
}

function updateRestaurant(id: number, updates: Partial<Restaurant>) {
  // 更新部分餐廳資料
}

updateRestaurant(1, { name: 'New Name' })  // 只更新名稱

使用 Partial 後,我們在更新餐廳資料時,只需要傳入我們要更新的屬性即可,而不必提供整個物件。


Required

RequiredPartial 相反,它會將所有屬性變成必填。這在處理物件屬性必須完全定義的情況下非常有用。

例如,當我們確保一個物件的每個屬性都必須被填寫時,可以使用 Required,這會強制要求開發者提供所有屬性:

type Restaurant = {
  id?: number
  name?: string
  address?: string
  phone?: string
  rating?: number
}

type CompleteRestaurant = Required<Restaurant>

const restaurant: CompleteRestaurant = {
  id: 1,
  name: 'Complete Restaurant',
  address: '123 Street',
  phone: '123-456-7890',
  rating: 5,
}

這裡我們使用了 Required,使得 Restaurant 的所有屬性變為必填,確保在創建 CompleteRestaurant 時,所有屬性都需要被提供。


Readonly

Readonly 將所有屬性設為唯讀,這意味著物件的屬性在被初始化後不能再被修改。這對於一些關鍵的資料保護非常有幫助,特別是在不希望對某些屬性進行意外更改時。

假設我們有一個餐廳物件,一旦餐廳的 id 被賦值後,就不希望它被改變,我們可以使用 Readonly 來達到這個效果:

type Restaurant = {
  id: number
  name: string
  address: string
}

const restaurant: Readonly<Restaurant> = {
  id: 1,
  name: 'Readonly Restaurant',
  address: '456 Avenue',
}

// restaurant.id = 2  // 這行會報錯,因為 id 是唯讀的

使用 Readonly 後,試圖修改 restaurantid 或其他屬性會導致錯誤,從而保護資料不被意外修改。

透過使用 PartialRequiredReadonly,我們可以更靈活地控制物件型別的屬性行為,根據需求使其變為可選、必填或唯讀。這些工具可以大大提升程式碼的可維護性,也讓型別系統變得更強大。


上一篇
【 Day 27 】Record, Pick, Omit
下一篇
【 Day 29 】Exclude, Extract, NonNullable
系列文
React 開發者的 TypeScript 探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言