TL;DR: TypeScript 泛型允許開發(fā)人員編寫可重用的代碼，這些代碼可以處理各種數(shù)據(jù)類型，同時(shí)保持類型安全。它們對(duì)于構(gòu)建健壯且可擴(kuò)展的 TypeScript 應(yīng)用程序至關(guān)重要。

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

本文探討了 Typescript 泛型的基礎(chǔ)知識(shí)，包括它們?cè)诤瘮?shù)、類和接口中的用法，并演示了它們?nèi)绾问勾a具有通用性和健壯性。

什么是 Typescript 泛型？

Typescript 泛型可以使用占位符類型定義 Typescript 代碼，使其靈活、可擴(kuò)展和可重用，同時(shí)保持類型安全。

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

如果沒有泛型，您將編寫一個(gè)函數(shù)或類的多個(gè)版本來(lái)處理不同的數(shù)據(jù)類型，從而導(dǎo)致代碼重復(fù)。泛型允許單個(gè)實(shí)現(xiàn)可重用于各種類型，同時(shí)保留靜態(tài)類型檢查。

下一節(jié)中的代碼示例將幫助您理解這種差異。

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

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

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

泛型經(jīng)常應(yīng)用于函數(shù)中以減少冗余。例如，考慮一個(gè)采用字符串或數(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 無(wú)法再?gòu)?qiáng)制執(zhí)行類型安全。如果我們需要維護(hù)類型安全，則必須編寫兩個(gè)不同的函數(shù)，一個(gè)返回字符串，另一個(gè)返回?cái)?shù)字。然而，這種方法會(huì)增加代碼重復(fù)。

我們可以通過(guò)使用泛型來(lái)保留類型信息來(lái)改進(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 中，在單個(gè)函數(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 中的默認(rèn)類型

在 Typescript 中，您可以為泛型提供默認(rèn)類型，使其成為可選類型。如果未提供類型，Typescript 將使用默認(rèn)類型。

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

在此示例中，類型參數(shù) T 默認(rèn)為字符串。如果開發(fā)者在調(diào)用函數(shù)時(shí)沒有指明具體類型，T將默認(rèn)為字符串。

3. 通用接口

Typescript 泛型也可以應(yīng)用于接口。想象一下，您想要定義一個(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ù)示例；由于我們沒有定義特定類型，因此該代碼也可以正常工作。但是，由于該值的類型為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 變量。在創(chuàng)建實(shí)例時(shí)，可以將 Type 變量指定為數(shù)字或字符串，以便 Typescript 確保遵循適當(dāng)?shù)念愋汀?/p>

4. 泛型類

還可以使用泛型編寫類來(lái)處理不同類型，同時(shí)保持類型安全。讓我們創(chuàng)建一個(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è)類可以工作，但是由于數(shù)據(jù)的類型為 any, getItem 方法返回 any, 刪除類型安全。因此，我們可以使用泛型重寫類來(lái)提高類型安全性。

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)您在創(chuàng)建實(shí)例時(shí)定義數(shù)據(jù)類型時(shí)，Typescript 可確保數(shù)據(jù)正確。此代碼示例中的 getItem 方法將生成一個(gè)數(shù)字。

5. 通用約束

您可以使用泛型約束來(lái)限制泛型可以接受的類型，確保它們具有特定的屬性。

例如，如果您有一個(gè)函數(shù)需要訪問輸入的 length 屬性，則可以使用約束來(lái)確保僅允許具有 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 屬性。我們通過(guò)說(shuō) T 延伸 { length: number }.
來(lái)做到這一點(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 泛型允許您編寫靈活、可回收且類型安全的代碼。您可以使用具有這些泛型的類、方法和接口來(lái)管理許多數(shù)據(jù)類型，而無(wú)需重復(fù)代碼。通用約束、眾多類型和默認(rèn)類型是我們?cè)诒疚闹杏懻摰囊恍╆P(guān)鍵用例，并展示了每種約束如何提高程序的可擴(kuò)展性和可維護(hù)性。

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

相關(guān)博客

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

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