TypeScript 提供了一系列內(nèi)置的“工具類型”（Utility Types），它們是對已有類型進行變換的便捷方式。通過這些工具類型，開發(fā)者可以更靈活、可維護地進行類型設(shè)計，避免重復(fù)定義類型邏輯。

工具類型的作用主要有：

• 快速基于已有類型創(chuàng)建新類型；
• 控制屬性的可選性、只讀性、選擇性；
• 提升代碼可讀性與復(fù)用性。

下面，我們將詳細(xì)講解 TypeScript 提供的常用工具類型及其應(yīng)用示例。

一、Partial<Type>

作用：將某個類型的所有屬性變?yōu)榭蛇x。

語法：

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>

作用：將某個類型中的所有屬性變?yōu)楸靥睢?/p>

語法：

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>

作用：將類型中所有屬性標(biāo)記為只讀，禁止修改。

語法：

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 的屬性不能被修改。
• 用于實現(xiàn)對象的不可變性。

四、Pick<Type, Keys>

作用：從類型 T 中挑選出一組指定的屬性，構(gòu)成新類型。

語法：

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>

作用：提取函數(shù)類型中所有參數(shù)類型，組成元組類型。

語法：

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]。
• 可以動態(tài)地從函數(shù)中提取參數(shù)類型進行復(fù)用。

六、Record<Keys, Type>

作用：構(gòu)建一個具有固定 key 的對象類型，所有 key 對應(yīng)的值都是指定的類型。

語法：

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 為數(shù)量的對象。
• 保證所有 key 都存在，且值為 number 類型。

七、Exclude<Type, ExcludedUnion>

作用：從聯(lián)合類型 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' 會報錯。

八、使用建議和最佳實踐

1. 理解每種工具類型的用途：如 Partial 用于表單、更新操作，Readonly 用于不可變數(shù)據(jù)。
2. 保持類型一致性：統(tǒng)一使用工具類型能讓代碼更具可讀性。
3. 合理組合工具類型：可以 Pick 再 Readonly，但避免過度嵌套造成難以維護。

九、總結(jié)

TypeScript 的工具類型為我們提供了一套強大且靈活的類型變換機制，可以讓類型定義更加精簡、強大而不失可讀性。無論是在業(yè)務(wù)模型構(gòu)建、表單設(shè)計還是 API 數(shù)據(jù)轉(zhuǎn)換中，它們都能大幅提升代碼的開發(fā)效率與維護質(zhì)量。

推薦使用場景包括：

• 接口部分字段可選（使用 Partial）
• 創(chuàng)建只讀數(shù)據(jù)模型（使用 Readonly）
• 提取函數(shù)參數(shù)、返回值類型（使用 Parameters, ReturnType）
• 對接口類型取子集（使用 Pick, Omit）
• 創(chuàng)建特定 key 的對象（使用 Record）

充分掌握這些工具類型，是成為 TypeScript 高效開發(fā)者的必經(jīng)之路。

到此這篇關(guān)于TypeScript的常用工具類型及其應(yīng)用示例的文章就介紹到這了,更多相關(guān)TypeScript 常用工具類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論