TypeScript 提供了一系列內置的“工具類型”(Utility Types),它們是對已有類型進行變換的便捷方式。通過這些工具類型,開發者可以更靈活、可維護地進行類型設計,避免重復定義類型邏輯。
工具類型的作用主要有:
- 快速基于已有類型創建新類型;
- 控制屬性的可選性、只讀性、選擇性;
- 提升代碼可讀性與復用性。
下面,我們將詳細講解 TypeScript 提供的常用工具類型及其應用示例。
一、Partial<Type>
作用:將某個類型的所有屬性變為可選。
語法:
Partial<T>
示例:
interface User {Id: string;email: string;
}type PartialUser = Partial<User>;const partialUser: PartialUser = { Id: '123' };console.log(partialUser); // 輸出: { Id: '123' }
說明:
PartialUser
中的所有屬性都是可選的。partialUser
只傳入了Id
屬性也合法。
二、Required<Type>
作用:將某個類型中的所有屬性變為必填。
語法:
Required<T>
示例:
interface User {name?: string;age?: number;
}type RequiredUser = Required<User>;const requiredUser: RequiredUser = { name: 'John', age: 20 };console.log(requiredUser); // 輸出: { name: 'John', age: 20 }
說明:
RequiredUser
中的所有屬性都變成了必填。- 缺少任何屬性都會報錯。
三、Readonly<Type>
作用:將類型中所有屬性標記為只讀,禁止修改。
語法:
Readonly<T>
示例:
interface User {name: string;age: number;
}type ReadonlyUser = Readonly<User>;const readonlyUser: ReadonlyUser = { name: 'John', age: 30 };readonlyUser.name = 'Jane';
// 報錯:Cannot assign to 'name' because it is a read-only property.
說明:
ReadonlyUser
的屬性不能被修改。- 用于實現對象的不可變性。
四、Pick<Type, Keys>
作用:從類型 T 中挑選出一組指定的屬性,構成新類型。
語法:
Pick<T, K>
示例:
interface User {name: string;age: number;email: string;
}type UserSummary = Pick<User, 'name' | 'email'>;const userSummary: UserSummary = { name: 'ram', email: 'ram@example.com' };console.log(userSummary); // 輸出: { name: 'ram', email: 'ram@example.com' }
說明:
- 只選擇了
User
中的name
和email
屬性。
五、Parameters<Type>
作用:提取函數類型中所有參數類型,組成元組類型。
語法:
Parameters<T>
示例:
function sum(a: number, b: number): number {return a + b;
}type SumParams = Parameters<typeof sum>; // [number, number]const params: SumParams = [1, 2];console.log(params); // 輸出: [1, 2]
說明:
SumParams
是一個元組類型[number, number]
。- 可以動態地從函數中提取參數類型進行復用。
六、Record<Keys, Type>
作用:構建一個具有固定 key 的對象類型,所有 key 對應的值都是指定的類型。
語法:
Record<K, T>
示例:
type Fruit = 'apple' | 'banana' | 'orange';type Inventory = Record<Fruit, number>;const inventory: Inventory = {apple: 10,banana: 15,orange: 20
};console.log(inventory);
// 輸出: { apple: 10, banana: 15, orange: 20 }
說明:
Inventory
是一個 key 為水果名,value 為數量的對象。- 保證所有 key 都存在,且值為 number 類型。
七、Exclude<Type, ExcludedUnion>
作用:從聯合類型 T 中排除掉屬于 U 的部分。
語法:
Exclude<T, U>
示例:
type Status = 'pending' | 'approved' | 'rejected';type NonRejectedStatus = Exclude<Status, 'rejected'>;const status: NonRejectedStatus = 'approved';console.log(status); // 輸出: approved
說明:
NonRejectedStatus
只包含'pending'
和'approved'
,排除了'rejected'
。- 如果賦值為
'rejected'
會報錯。
八、使用建議和最佳實踐
- 理解每種工具類型的用途:如
Partial
用于表單、更新操作,Readonly
用于不可變數據。 - 保持類型一致性:統一使用工具類型能讓代碼更具可讀性。
- 合理組合工具類型:可以
Pick
再Readonly
,但避免過度嵌套造成難以維護。
九、總結
TypeScript 的工具類型為我們提供了一套強大且靈活的類型變換機制,可以讓類型定義更加精簡、強大而不失可讀性。無論是在業務模型構建、表單設計還是 API 數據轉換中,它們都能大幅提升代碼的開發效率與維護質量。
推薦使用場景包括:
- 接口部分字段可選(使用
Partial
) - 創建只讀數據模型(使用
Readonly
) - 提取函數參數、返回值類型(使用
Parameters
,ReturnType
) - 對接口類型取子集(使用
Pick
,Omit
) - 創建特定 key 的對象(使用
Record
)
充分掌握這些工具類型,是成為 TypeScript 高效開發者的必經之路。