TL;DR: TypeScript 公用程式類型是預(yù)先建立的函數(shù)，可以轉(zhuǎn)換現(xiàn)有類型，讓您的程式碼更乾淨(jìng)且更易於維護(hù)。本文透過(guò)實(shí)際範(fàn)例解釋了基本實(shí)用程式類型，包括如何更新使用者設(shè)定檔、管理配置和安全地過(guò)濾資料。

TypeScript 是現(xiàn)代 Web 開發(fā)的基石，使開發(fā)人員能夠編寫更安全、更易於維護(hù)的程式碼。透過(guò)向 JavaScript 引入靜態(tài)類型，TypeScript 有助於在編譯時(shí)捕獲錯(cuò)誤。根據(jù) 2024 年 Stack Overflow 開發(fā)者調(diào)查，TypeScript 在開發(fā)者中最受歡迎的腳本技術(shù)中排名第 5。

TypeScript 令人驚嘆的功能是其成功的主要原因。例如，實(shí)用程式類型可以幫助開發(fā)人員簡(jiǎn)化類型操作並減少樣板程式碼。 TypeScript 2.1 中引入了實(shí)用程式類型，並且在每個(gè)新版本中都新增了其他實(shí)用程式類型。

本文將詳細(xì)討論實(shí)用程式類型，以幫助您掌握 TypeScript。

了解 TypeScript 實(shí)用程式類型

公用程式類型是 TypeScript 中預(yù)先定義的泛型類型，可以將現(xiàn)有型別轉(zhuǎn)換為新的變體類型。它們可以被認(rèn)為是類型級(jí)函數(shù)，將現(xiàn)有類型作為參數(shù)並根據(jù)某些轉(zhuǎn)換規(guī)則傳回新類型。

這在使用介面時(shí)特別有用，因?yàn)橥ǔＰ枰薷囊汛嬖陬愋偷淖凅w，而實(shí)際上不需要複製類型定義。

核心實(shí)用程式類型及其實(shí)際應(yīng)用

部分的

Partial 實(shí)用程式類型採(cǎi)用一個(gè)類型並使其所有屬性都是可選的。當(dāng)類型嵌套時(shí)，此實(shí)用程式類型特別有價(jià)值，因?yàn)樗鼤?huì)使屬性遞歸地可選。

例如，假設(shè)您正在建立一個(gè)使用者設(shè)定檔更新功能。在這種情況下，如果使用者不想更新所有字段，則可以只使用 Partial 類型，只更新所需的字段。這在不需要所有欄位的表單和 API 中非常方便。

請(qǐng)參考以下程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

必需的

Required 實(shí)用程式類型建構(gòu)一個(gè)類型，並將所提供類型的所有屬性設(shè)為 required。這對(duì)於確保在將物件儲(chǔ)存到資料庫(kù)之前所有屬性都可用非常有用。

例如，如果在汽車註冊(cè)時(shí)使用必填，它將確保您在創(chuàng)建或保存新汽車記錄時(shí)不會(huì)錯(cuò)過(guò)任何必要的屬性，例如品牌、型號(hào)和里程。這對(duì)於資料完整性而言非常關(guān)鍵。

請(qǐng)參考以下程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

只讀

Readonly 實(shí)用程式類型建立一個(gè)所有屬性都是唯讀的型別。這在組態(tài)管理中非常有用，可以保護(hù)關(guān)鍵設(shè)定免受不必要的變更。

例如，當(dāng)您的應(yīng)用程式依賴特定的 API 端點(diǎn)時(shí)，它們不應(yīng)在執(zhí)行過(guò)程中發(fā)生變更。將它們?cè)O(shè)為唯讀可以保證它們?cè)趹?yīng)用程式的整個(gè)生命週期中保持不變。

請(qǐng)參考以下程式碼範(fàn)例。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

挑選

Pick** 實(shí)用程式類型透過(guò)從現(xiàn)有型別中選取一組屬性來(lái)建構(gòu)型別。當(dāng)您需要過(guò)濾掉重要資訊（例如使用者姓名和電子郵件）以顯示在儀表板或摘要檢視中時(shí)，這非常有用。它有助於提高資料的安全性和清晰度。

請(qǐng)參考以下程式碼範(fàn)例。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

忽略

Omit 實(shí)用程式類型透過(guò)從現(xiàn)有型別中排除特定屬性來(lái)建構(gòu)型別。

例如，如果您想與某些第三方共享使用者資料但沒(méi)有敏感資訊（例如電子郵件地址），省略將很有用。您可以透過(guò)定義一個(gè)排除這些欄位的新類型來(lái)做到這一點(diǎn)。特別是在 API 中，您可能想要查看 API 回應(yīng)中的外部?jī)?nèi)容。

請(qǐng)參考下一個(gè)程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

記錄

Record 實(shí)用程式類型會(huì)建立具有指定鍵和值的物件類型，這在處理結(jié)構(gòu)化對(duì)應(yīng)時(shí)非常有用。

例如，在庫(kù)存管理系統(tǒng)的上下文中，Record 類型可用於在項(xiàng)目和數(shù)量之間進(jìn)行明確映射。透過(guò)這種類型的結(jié)構(gòu)，可以輕鬆存取和修改庫(kù)存數(shù)據(jù)，同時(shí)確保所有預(yù)期的水果都得到考慮。

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

排除

排除**實(shí)用程式類型透過(guò)從聯(lián)合中排除特定類型來(lái)構(gòu)造類型。

在設(shè)計(jì)只接受某些原始類型（例如，數(shù)字或布林值，但不接受字串）的函數(shù)時(shí)，可以使用 排除。這可以防止意外類型可能在執(zhí)行過(guò)程中導(dǎo)致錯(cuò)誤的錯(cuò)誤。

請(qǐng)參考以下程式碼範(fàn)例。

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

提煉

Extract 實(shí)用程式類型透過(guò)從聯(lián)合中提取特定類型來(lái)建構(gòu)類型。

在只需要處理混合類型集合中的數(shù)值（例如執(zhí)行計(jì)算）的情況下，使用 Extract 可確保僅傳遞數(shù)字。這在資料處理管道中非常有用，其中嚴(yán)格的類型可以防止運(yùn)行時(shí)錯(cuò)誤。

請(qǐng)參考以下程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

不可為空

NonNullable 實(shí)用程式類型透過(guò)從給定類型排除 null 和 undefined 來(lái)建構(gòu)型別。

在需要始終定義某些值（例如使用者名稱或產(chǎn)品ID）的應(yīng)用程式中，將它們?cè)O(shè)為NonNullable 將確保此類關(guān)鍵欄位永遠(yuǎn)不會(huì)為null 或未定義。它在表單驗(yàn)證和 API 回應(yīng)期間非常有用，因?yàn)槿鄙僦悼赡軙?huì)導(dǎo)致問(wèn)題。

請(qǐng)參考下一個(gè)程式碼範(fàn)例。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

返回類型

ReturnType 實(shí)用程式提取函數(shù)的傳回類型。

當(dāng)使用傳回複雜物件（例如座標(biāo)）的高階函數(shù)或回呼時(shí)，使用 ReturnType 可以簡(jiǎn)化定義預(yù)期的回傳類型，而無(wú)需每次都手動(dòng)聲明它們。這可以透過(guò)減少與類型不匹配相關(guān)的錯(cuò)誤來(lái)加快開發(fā)速度。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

參數(shù)

參數(shù)實(shí)用程式將函數(shù)的參數(shù)類型提取為元組。

在想要?jiǎng)討B(tài)操作或驗(yàn)證函數(shù)參數(shù)的情況下，例如在函數(shù)周圍編寫包裝器時(shí)，這可以輕鬆提取和重複使用參數(shù)類型。透過(guò)確保函數(shù)簽章的一致性，它大大提高了程式碼庫(kù)中程式碼的可重複使用性和可維護(hù)性。

請(qǐng)參考以下程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

具有實(shí)用程式類型組合的高階用例

使用 TypeScript 開發(fā)應(yīng)用程式時(shí)，組合這些實(shí)用程式類型可以獲得強(qiáng)大的結(jié)果。讓我們來(lái)看看多種實(shí)用程式類型有效協(xié)同工作的一些場(chǎng)景。

結(jié)合部分和必需

您可以建立一個(gè)需要某些欄位而允許其他欄位可選的類型。

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

在此範(fàn)例中，UpdateUser 需要 id 屬性，同時(shí)允許名稱和電子郵件為可選。此模式對(duì)於更新標(biāo)識(shí)符必須始終存在的記錄非常有用。

建立靈活的 API 回應(yīng)

您可能想要定義根據(jù)特定條件具有不同形狀的 API 回應(yīng)。

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

這裡，ApiResponse 允許您為 API 呼叫建立靈活的回應(yīng)類型。透過(guò)使用 Pick ，您可以確?；貞?yīng)中僅包含相關(guān)的使用者資料。

結(jié)合排除和提取來(lái)過(guò)濾類型

您可能會(huì)遇到需要根據(jù)特定條件從聯(lián)合中過(guò)濾掉特定類型的情況。

請(qǐng)參考以下程式碼範(fàn)例。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

這裡，Exclude 實(shí)用程式用於建立一個(gè)型別( NonLoadingResponses )，從原始ResponseTypes 聯(lián)合中排除loading handleResponse函數(shù)只接受成功或錯(cuò)誤作為有效輸入。

最佳實(shí)踐

僅使用必要的

雖然實(shí)用程式類型非常強(qiáng)大，但過(guò)度使用它們可能會(huì)導(dǎo)致複雜且不可讀的程式碼。在利用這些實(shí)用程式和保持程式碼清晰度之間取得平衡至關(guān)重要。

請(qǐng)參考下一個(gè)程式碼範(fàn)例。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

保持清晰度

確保每個(gè)實(shí)用程式用例的目的明確。避免將太多實(shí)用程式嵌套在一起，因?yàn)樗赡軙?huì)混淆類型的預(yù)期結(jié)構(gòu)。

請(qǐng)參考以下程式碼範(fàn)例。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

性能考慮

雖然在執(zhí)行時(shí)間效能影響很少，因?yàn)?TypeScript 類型在編譯後消失，但複雜型別會(huì)減慢 TypeScript 編譯器的速度，影響開發(fā)速度。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

結(jié)論

毫無(wú)疑問(wèn)，TypeScript 是 Web 開發(fā)人員中最受歡迎的語(yǔ)言之一。實(shí)用程式類型是 TypeScript 中的獨(dú)特功能之一，如果正確使用，它可以顯著提高 TypeScript 開發(fā)體驗(yàn)和程式碼品質(zhì)。但是，我們不應(yīng)該在所有場(chǎng)景中都使用它們，因?yàn)榭赡軙?huì)出現(xiàn)效能和程式碼可維護(hù)性問(wèn)題。

相關(guān)部落格

• JavaScript 和 TypeScript 的頂級(jí) Linters：簡(jiǎn)化程式碼品質(zhì)管理
• 每個(gè)開發(fā)人員都應(yīng)該知道的 7 個(gè) JavaScript 單元測(cè)試框架
• TypeScript 中感嘆號(hào)的使用
• 理解 TypeScript 中的條件型別

以上是TypeScript 實(shí)用程式類型：完整指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！