搜尋

首頁 >web前端 >js教程 >TypeScript 實用程式類型：完整指南

TypeScript 實用程式類型：完整指南

Barbara Streisand
Barbara Streisand原創
2024-12-08 03:41:09582瀏覽

TL;DR: TypeScript 公用程式類型是預先建立的函數，可以轉換現有類型，讓您的程式碼更乾淨且更易於維護。本文透過實際範例解釋了基本實用程式類型，包括如何更新使用者設定檔、管理配置和安全地過濾資料。

TypeScript Utility Types: A Complete Guide

TypeScript 是現代 Web 開發的基石，使開發人員能夠編寫更安全、更易於維護的程式碼。透過向 JavaScript 引入靜態類型，TypeScript 有助於在編譯時捕獲錯誤。根據 2024 年 Stack Overflow 開發者調查，TypeScript 在開發者中最受歡迎的腳本技術中排名第 5。

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

本文將詳細討論實用程式類型，以幫助您掌握 TypeScript。

了解 TypeScript 實用程式類型

公用程式類型是 TypeScript 中預先定義的泛型類型，可以將現有型別轉換為新的變體類型。它們可以被認為是類型級函數，將現有類型作為參數並根據某些轉換規則傳回新類型。

這在使用介面時特別有用，因為通常需要修改已存在類型的變體，而實際上不需要複製類型定義。

核心實用程式類型及其實際應用

TypeScript Utility Types: A Complete Guide

部分的

Partial 實用程式類型採用一個類型並使其所有屬性都是可選的。當類型嵌套時，此實用程式類型特別有價值，因為它會使屬性遞歸地可選。

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

請參考以下程式碼範例。 

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

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

updateUser({ name: 'Alice' });

必需的

Required 實用程式類型建構一個類型，並將所提供類型的所有屬性設為 required。這對於確保在將物件儲存到資料庫之前所有屬性都可用非常有用。

例如，如果在汽車註冊時使用必填，它將確保您在創建或保存新汽車記錄時不會錯過任何必要的屬性，例如品牌、型號和里程。這對於資料完整性而言非常關鍵。

請參考以下程式碼範例。 

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

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

updateUser({ name: 'Alice' });

只讀

Readonly 實用程式類型建立一個所有屬性都是唯讀的型別。這在組態管理中非常有用，可以保護關鍵設定免受不必要的變更。

例如，當您的應用程式依賴特定的 API 端點時，它們不應在執行過程中發生變更。將它們設為唯讀可以保證它們在應用程式的整個生命週期中保持不變。

請參考以下程式碼範例。 

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

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

挑選

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

請參考以下程式碼範例。 

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 實用程式類型透過從現有型別中排除特定屬性來建構型別。

例如，如果您想與某些第三方共享使用者資料但沒有敏感資訊（例如電子郵件地址），省略將很有用。您可以透過定義一個排除這些欄位的新類型來做到這一點。特別是在 API 中，您可能想要查看 API 回應中的外部內容。

請參考下一個程式碼範例。 

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

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

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

記錄

Record 實用程式類型會建立具有指定鍵和值的物件類型，這在處理結構化對應時非常有用。

例如，在庫存管理系統的上下文中，Record 類型可用於在項目和數量之間進行明確映射。透過這種類型的結構，可以輕鬆存取和修改庫存數據，同時確保所有預期的水果都得到考慮。 

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

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

排除

排除**實用程式類型透過從聯合中排除特定類型來構造類型。

在設計只接受某些原始類型（例如，數字或布林值，但不接受字串）的函數時，可以使用 排除。這可以防止意外類型可能在執行過程中導致錯誤的錯誤。

請參考以下程式碼範例。 

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

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

提煉

Extract 實用程式類型透過從聯合中提取特定類型來建構類型。

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

請參考以下程式碼範例。 

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

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

updateUser({ name: 'Alice' });

不可為空

NonNullable 實用程式類型透過從給定類型排除 null 和 undefined 來建構型別。

在需要始終定義某些值（例如使用者名稱或產品ID）的應用程式中，將它們設為NonNullable 將確保此類關鍵欄位永遠不會為null 或未定義。它在表單驗證和 API 回應期間非常有用，因為缺少值可能會導致問題。

請參考下一個程式碼範例。 

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

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

返回類型

ReturnType 實用程式提取函數的傳回類型。

當使用傳回複雜物件（例如座標）的高階函數或回呼時，使用 ReturnType 可以簡化定義預期的回傳類型，而無需每次都手動聲明它們。這可以透過減少與類型不匹配相關的錯誤來加快開發速度。 

interface Config {
  apiEndpoint: string;
}

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

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

參數

參數實用程式將函數的參數類型提取為元組。

在想要動態操作或驗證函數參數的情況下，例如在函數周圍編寫包裝器時，這可以輕鬆提取和重複使用參數類型。透過確保函數簽章的一致性，它大大提高了程式碼庫中程式碼的可重複使用性和可維護性。

請參考以下程式碼範例。 

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

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

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

具有實用程式類型組合的高階用例

使用 TypeScript 開發應用程式時，組合這些實用程式類型可以獲得強大的結果。讓我們來看看多種實用程式類型有效協同工作的一些場景。

結合部分和必需

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

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

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

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

建立靈活的 API 回應

您可能想要定義根據特定條件具有不同形狀的 API 回應。 

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

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

這裡，ApiResponse 允許您為 API 呼叫建立靈活的回應類型。透過使用 Pick ，您可以確保回應中僅包含相關的使用者資料。

結合排除和提取來過濾類型

您可能會遇到需要根據特定條件從聯合中過濾掉特定類型的情況。

請參考以下程式碼範例。 

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

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

updateUser({ name: 'Alice' });

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

最佳實踐

僅使用必要的

雖然實用程式類型非常強大，但過度使用它們可能會導致複雜且不可讀的程式碼。在利用這些實用程式和保持程式碼清晰度之間取得平衡至關重要。

請參考下一個程式碼範例。 

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

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

保持清晰度

確保每個實用程式用例的目的明確。避免將太多實用程式嵌套在一起，因為它可能會混淆類型的預期結構。

請參考以下程式碼範例。 

interface Config {
  apiEndpoint: string;
}

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

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

性能考慮

雖然在執行時間效能影響很少，因為 TypeScript 類型在編譯後消失，但複雜型別會減慢 TypeScript 編譯器的速度，影響開發速度。 

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

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

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

結論

毫無疑問，TypeScript 是 Web 開發人員中最受歡迎的語言之一。實用程式類型是 TypeScript 中的獨特功能之一，如果正確使用，它可以顯著提高 TypeScript 開發體驗和程式碼品質。但是，我們不應該在所有場景中都使用它們，因為可能會出現效能和程式碼可維護性問題。

相關部落格

  • JavaScript 和 TypeScript 的頂級 Linters：簡化程式碼品質管理
  • 每個開發人員都應該知道的 7 個 JavaScript 單元測試框架
  • TypeScript 中感嘆號的使用
  • 理解 TypeScript 中的條件型別

以上是TypeScript 實用程式類型：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript typescript Static Object NULL define if for while catch Error Filter union using Conditional Property Collection Generic undefined function this display overflow transform database
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用 Vanilla JavaScript 進行安全文字加密與解密下一篇：使用 Vanilla JavaScript 進行安全文字加密與解密

相關文章

看更多