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

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

本文探討了 Typescript 泛型的基礎(chǔ)知識，包括它們在函數(shù)、類別和介面中的用法，並示範(fàn)了它們?nèi)绾问钩淌酱a具有通用性和健全性。

什麼是 Typescript 泛型？

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

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

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

下一節(jié)中的程式碼範(fàn)例將幫助您理解這種差異。

何時使用 Typescript 泛型？

泛型可以在打字稿的不同部分使用，以幫助更有效地管理類型。它們在函數(shù)、介面、類別和其他靈活性至關(guān)重要的結(jié)構(gòu)中發(fā)揮著重要作用。

1. 函數(shù)中的泛型類型

泛型經(jīng)常應(yīng)用於函數(shù)中以減少冗餘。例如，考慮一個採用字串或數(shù)字作為參數(shù)的函數(shù)。

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

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

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

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

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

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

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

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

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

在本例中，函數(shù)傳回一個元組，其中第一個元素的類型為 T 類型，第二個元素的類型為 U。這使得函數(shù)能夠?qū)煞N不同類型進(jìn)行類型安全處理。

2. TypeScript 中的預(yù)設(shè)類型

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

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

在此範(fàn)例中，類型參數(shù) T 預(yù)設(shè)為字串。如果開發(fā)者在呼叫函數(shù)時沒有指明特定類型，T將預(yù)設(shè)為字串。

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

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

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

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

介面是通用的，其值類型嚴(yán)格限制為 Type 變數(shù)。在建立實例時，可以將 Type 變數(shù)指定為數(shù)字或字串，以便 Typescript 確保遵循適當(dāng)?shù)念愋汀?

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 類別使用。當(dāng)您在建立實例時定義資料類型時，Typescript 可確保資料正確。此程式碼範(fàn)例中的 getItem 方法將產(chǎn)生一個數(shù)字。

5. 通用約束

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

例如，如果您有一個函數(shù)需要存取輸入的 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

現(xiàn)在，這個函數(shù)將具有 length 屬性；它不會給出任何錯誤，並將按照輸入的長度執(zhí)行。

結(jié)論

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

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

相關(guān)部落格

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

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