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

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

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

什麼是 Typescript 泛型？

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

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

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

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

何時(shí)使用 Typescript 泛型？

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

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

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

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

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

我們可以透過使用泛型來保留類型資訊來改進(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í)，您可以使用多個(gè)泛型類型參數(shù)。例如，您可能需要一個(gè)接受兩種不同類型的輸入並將它們作為一對(duì)返回的函數(shù)。

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

在本例中，函數(shù)傳回一個(gè)元組，其中第一個(gè)元素的類型為 T 類型，第二個(gè)元素的類型為 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ù)時(shí)沒有指明特定類型，T將預(yù)設(shè)為字串。

3. 通用介面

Typescript 泛型也可以套用於介面。想像一下，您想要定義一個(gè) 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)例；由於我們沒有定義特定類型，因此程式碼也可以正常運(yùn)作。但是，由於該值的類型為any，，我們可能會(huì)遇到與類型相關(guān)的錯(cuò)誤。

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

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

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

4. 泛型類別

也可以使用泛型編寫類別來處理不同類型，同時(shí)保持類型安全。讓我們建立一個(gè) Storage 類，它可以儲(chǔ)存和檢索 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

這個(gè)類別可以運(yùn)作，但由於資料的型別為 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)您在建立實(shí)例時(shí)定義資料類型時(shí)，Typescript 可確保資料正確。此程式碼範(fàn)例中的 getItem 方法將產(chǎn)生一個(gè)數(shù)字。

5. 通用約束

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

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

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

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

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

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

結(jié)論

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

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

相關(guān)部落格

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

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