TypeScript 泛型：完整指南

TL;DR: TypeScript 泛型允許開發人員編寫可重複使用的程式碼，這些程式碼可以處理各種資料類型，同時保持類型安全。它們對於建立健壯且可擴展的 TypeScript 應用程式至關重要。

為了確保程式碼透明且可管理，Typescript 需要對多種資料進行安全有效的管理。 Typescript 的核心功能之一是 Typescript 泛型，它允許創建函數、類別和接口，同時遵守嚴格的類型限制。泛型可以讓您編寫更少的程式碼，減少錯誤，最重要的是，可以為不同的資料類型建立靈活的元件。

本文探討了 Typescript 泛型的基礎知識，包括它們在函數、類別和介面中的用法，並示範了它們如何使程式碼具有通用性和健全性。

什麼是 Typescript 泛型？

Typescript 泛型可以使用佔位符類型定義 Typescript 程式碼，使其靈活、可擴充和可重複使用，同時保持類型安全。

Typescript 在編譯時作為定義泛型類型的佔位符進行型別安全檢查。當元件被實作時，實際類型將取代佔位符。這種技術使管理和減少口是心非變得更加容易，因為您不需要為每種資料類型實現不同的實作。

如果沒有泛型，您將編寫一個函數或類別的多個版本來處理不同的資料類型，從而導致程式碼重複。泛型允許單一實作可重用於各種類型，同時保留靜態類型檢查。

下一節中的程式碼範例將幫助您理解這種差異。

何時使用 Typescript 泛型？

泛型可以在打字稿的不同部分使用，以幫助更有效地管理類型。它們在函數、介面、類別和其他靈活性至關重要的結構中發揮著重要作用。

1. 函數中的泛型類型

泛型經常應用於函數中以減少冗餘。例如，考慮一個採用字串或數字作為參數的函數。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

這個功能運作良好。但它使用任何類型，這意味著 Typescript 會失去對特定類型的追蹤。因此，傳回值的類型為 any, 且 Typescript 無法再強制執行型別安全。如果我們需要維護類型安全，則必須編寫兩個不同的函數，一個返回字串，另一個返回數字。然而，這種方法會增加程式碼重複。

我們可以透過使用泛型來保留類型資訊來改進上述功能。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

T 表示該方法在本例中使用的類型。如果存在，Typescript 將確認輸入類型和傳回參數中的類型是否相同。

此外，我們可以在不明確定義參數類型的情況下定義函數。

function identity<T>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string

在 Typescript 中，在單一函數或元件中處理多種類型時，您可以使用多個泛型類型參數。例如，您可能需要一個接受兩種不同類型的輸入並將它們作為一對返回的函數。

const result3 = identity(100); // result3: number
const result4 = identity("world"); // result4: string

在本例中，函數傳回一個元組，其中第一個元素的類型為 T 類型，第二個元素的類型為 U。這使得函數能夠對兩種不同類型進行類型安全處理。

2. TypeScript 中的預設類型

在 Typescript 中，您可以為泛型提供預設類型，使其成為可選類型。如果未提供類型，Typescript 將使用預設類型。

function multipleParams<T, U>(first: T, second: U): [T, U] {
 return [first, second];
}
const result1 = multipleParams<string, number>("hello", 42); // result1: [string, number]
const result2 = multipleParams<string, number>("hello", "world"); // result2: gives a type error

在此範例中，類型參數 T 預設為字串。如果開發者在呼叫函數時沒有指明特定類型，T將預設為字串。

3. 通用介面

Typescript 泛型也可以套用於介面。想像一下，您想要定義一個 Box 接口，其值為 any 類型。

function createArray<T = string>(length: number, value: T): T[] {
 return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // T defaults to string, so stringArray is a string array
const numberArray = createArray<number>(3, 42); // T is explicitly set to a number, so numberArray is a number array

這更等於通用函數範例；由於我們沒有定義特定類型，因此程式碼也可以正常運作。但是，由於該值的類型為any，，我們可能會遇到與類型相關的錯誤。

為了保護類型，我們可以在這裡定義一個通用介面。

interface Box {
  value: any;
}
const numberBox: Box = { value: 123 }; // correct
const stringBox: Box = { value: "hello" }; // correct

介面是通用的，其值類型嚴格限制為 Type 變數。在建立實例時，可以將 Type 變數指定為數字或字串，以便 Typescript 確保遵循適當的類型。

4. 泛型類別

也可以使用泛型編寫類別來處理不同類型，同時保持類型安全。讓我們建立一個 Storage 類，它可以儲存和檢索 any 類型的值。

interface Box<Type> {
  value: Type;
}
const numberBox: Box<number> = { value: 123 }; // number
const stringBox: Box<string> = { value: "hello" }; // string
const stringBox2: Box<string> = { value: 123 }; // incorrect

這個類別可以運作，但由於資料的型別為 any, getItem 方法回傳 any, 刪除型別安全。因此，我們可以使用泛型重寫類別來提高類型安全性。

class Storage {
  private data: any;
  setItem(item: any): void {
    this.data = item;
  }
  getItem(): any {
    return this.data;
  }
}
const storage = new Storage();
storage.setItem(123);
const item = storage.getItem();

在本例中，T 類型由 Storage 類別使用。當您在建立實例時定義資料類型時，Typescript 可確保資料正確。此程式碼範例中的 getItem 方法將產生一個數字。

5. 通用約束

您可以使用泛型限制來限制泛型可以接受的類型，確保它們具有特定的屬性。

例如，如果您有一個函數需要存取輸入的 length 屬性，則可以使用約束來確保僅允許具有 length 屬性的類型。這可以防止 Typescript 給出錯誤或讓不相容的類型漏掉。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

此處，值 T 未使用 length 屬性定義。要忽略這個問題，我們可以新增一個約束，指定 T 必須有 length 屬性。我們透過說 T 延伸 { length: number }.
來做到這一點

function identity<T>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string

現在，這個函數將具有 length 屬性；它不會給出任何錯誤，並將按照輸入的長度執行。

結論

Typescript 泛型可讓您編寫靈活、可回收且類型安全的程式碼。您可以使用具有這些泛型的類別、方法和介面來管理許多資料類型，而無需重複程式碼。通用約束、眾多類型和預設類型是我們在本文中討論的一些關鍵用例，並展示了每種約束如何提高程式的可擴展性和可維護性。

了解 Typescript 泛型可以幫助您編寫更精確、適應性更強且類型安全的程式碼，讓您的 Typescript 應用程式更加健壯。

相關部落格

• Webpack 與 Vite：哪個捆綁器適合您？
• 使用單 Spa 建造微前端：指南
• 使用 RxJS 掌握非同步 JavaScript
• Axios 和 Fetch API？選擇正確的 HTTP 用戶端

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