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

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

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

什么是 Typescript 泛型？

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

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

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

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

何時使用 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 無法再強制執(zhí)行類型安全。如果我們需要維護類型安全，則必須編寫兩個不同的函數(shù)，一個返回字符串，另一個返回數(shù)字。然而，這種方法會增加代碼重復(fù)。

我們可以通過使用泛型來保留類型信息來改進上述功能。

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

T 表示該方法在本例中使用的類型。如果存在，Typescript 將確認輸入類型和返回參數(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不同類型進行類型安全處理。

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

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

3. 通用接口

Typescript 泛型也可以應(yīng)用于接口。想象一下，您想要定義一個 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，，我們可能會遇到與類型相關(guān)的錯誤。

為了保護類型，我們可以在這里定義一個通用接口。

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

接口是通用的，其值類型嚴格限制為 Type 變量。在創(chuàng)建實例時，可以將 Type 變量指定為數(shù)字或字符串，以便 Typescript 確保遵循適當?shù)念愋汀?/p>

4. 泛型類

還可以使用泛型編寫類來處理不同類型，同時保持類型安全。讓我們創(chuàng)建一個 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

這個類可以工作，但是由于數(shù)據(jù)的類型為 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 類使用。當您在創(chuàng)建實例時定義數(shù)據(jù)類型時，Typescript 可確保數(shù)據(jù)正確。此代碼示例中的 getItem 方法將生成一個數(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 泛型允許您編寫靈活、可回收且類型安全的代碼。您可以使用具有這些泛型的類、方法和接口來管理許多數(shù)據(jù)類型，而無需重復(fù)代碼。通用約束、眾多類型和默認類型是我們在本文中討論的一些關(guān)鍵用例，并展示了每種約束如何提高程序的可擴展性和可維護性。

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

相關(guān)博客

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

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