今天我們要繼續介紹 TypeScript 的 Utility Types。這次要探索的是 Partial
、Required
以及 Readonly
,這些工具類型能夠讓我們更靈活地控制物件型別的屬性行為,例如讓屬性變得可選、變為必填或設為唯讀。透過這些工具,可以讓程式碼更具彈性,並減少重複定義型別的麻煩。
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
與 Partial
相反,它會將所有屬性變成必填。這在處理物件屬性必須完全定義的情況下非常有用。
例如,當我們確保一個物件的每個屬性都必須被填寫時,可以使用 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
將所有屬性設為唯讀,這意味著物件的屬性在被初始化後不能再被修改。這對於一些關鍵的資料保護非常有幫助,特別是在不希望對某些屬性進行意外更改時。
假設我們有一個餐廳物件,一旦餐廳的 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
後,試圖修改 restaurant
的 id
或其他屬性會導致錯誤,從而保護資料不被意外修改。
透過使用 Partial
、Required
和 Readonly
,我們可以更靈活地控制物件型別的屬性行為,根據需求使其變為可選、必填或唯讀。這些工具可以大大提升程式碼的可維護性,也讓型別系統變得更強大。