什么是泛型？

TypeScript 中的泛型允許編寫(xiě)可處理各種數(shù)據(jù)類(lèi)型的代碼，同時(shí)保持類(lèi)型安全。它們?cè)试S在不犧牲類(lèi)型檢查的情況下創(chuàng)建可重用的組件、函數(shù)和數(shù)據(jù)結(jié)構(gòu)。

泛型由類(lèi)型參數(shù)表示，這些參數(shù)充當(dāng)類(lèi)型的占位符。這些參數(shù)在尖括號(hào) （ <> ） 中指定，可以在整個(gè)代碼中用于定義變量類(lèi)型、函數(shù)參數(shù)、返回類(lèi)型等。

TypeScript 泛型用例

泛型的基本用法

讓我們從泛型函數(shù)的簡(jiǎn)單示例開(kāi)始：

function identity<T>(arg: T): T {
  return arg;
}

const output = identity<string>("hello");
console.log(output); // hello

在此示例中， identity 是一個(gè)采用類(lèi)型參數(shù)的泛型函數(shù) T 。參數(shù) arg 的類(lèi)型為 T ，函數(shù)的返回類(lèi)型也是 T 。調(diào)用 identity<string>("hello") 時(shí)，類(lèi)型參數(shù) T 推斷為 string ，確保類(lèi)型安全。

如何使用泛型類(lèi)

泛型不僅限于函數(shù)，它們還可以與類(lèi)一起使用。請(qǐng)考慮以下泛型 Box 類(lèi)示例：

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const box = new Box<number>(42);
console.log(box.getValue()); //  42

這里， Box 是一個(gè)帶有類(lèi)型參數(shù)的泛型類(lèi) T 。構(gòu)造函數(shù)采用 type 的值，該 getValue 方法返回 type T T 的值。創(chuàng)建 的實(shí)例時(shí) Box ，它只能存儲(chǔ)和返回 類(lèi)型的 number 值。

如何對(duì)泛型應(yīng)用約束

有時(shí)，您可能希望限制可用于泛型的類(lèi)型。TypeScript 允許您使用 extends 關(guān)鍵字指定對(duì)類(lèi)型參數(shù)的約束。讓我們看一個(gè)例子

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

const result = loggingIdentity("hello");
console.log(result); // Output: hello

在此示例中，該 loggingIdentity 函數(shù)采用一個(gè)類(lèi)型參數(shù)， T 該參數(shù)必須擴(kuò)展 Lengthwise 接口，從而確保具有 arg length 屬性。此約束允許在不導(dǎo)致編譯錯(cuò)誤的情況下訪(fǎng)問(wèn) length 該屬性。

如何將泛型與接口一起使用

泛型還可以與接口一起使用，以創(chuàng)建靈活且可重用的定義。請(qǐng)看以下示例：

interface Pair<T, U> {
  first: T;
  second: U;
}

let pair: Pair<number, string> = { first: 1, second: "two" };
console.log(pair); // Output: { first: 1, second: "two" }

這里， Pair 是一個(gè)具有兩個(gè)類(lèi)型參數(shù) T 和 的接口，分別表示 first 和 second U 屬性的類(lèi)型。聲明 pair 為 Pair<number, string> 時(shí)，它強(qiáng)制要求屬性必須是數(shù)字，并且 first second 屬性必須是字符串。

如何將泛型函數(shù)與數(shù)組一起使用

function reverse<T>(array: T[]): T[] {
  return array.reverse();
}

let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers: number[] = reverse(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

在此示例中，該 reverse 函數(shù)采用 type T 的數(shù)組，并返回相同類(lèi)型的反向數(shù)組。通過(guò)使用泛型，該函數(shù)可以處理任何類(lèi)型的數(shù)組，從而確保類(lèi)型安全。

如何將泛型約束與 keyof

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

let person = { name: "John", age: 30, city: "New York" };
let age: number = getProperty(person, "age");
console.log(age); // Output: 30

在這里，該 getProperty 函數(shù)接受一個(gè) type 的對(duì)象和一個(gè) type T K 的鍵，其中 K 擴(kuò)展了 T 的鍵。然后，它從對(duì)象返回相應(yīng)的屬性值。此示例演示如何在訪(fǎng)問(wèn)對(duì)象屬性時(shí)使用泛型 keyof 來(lái)強(qiáng)制實(shí)施類(lèi)型安全性。

如何使用泛型實(shí)用程序函數(shù)

function toArray<T>(value: T): T[] {
  return [value];
}

let numberArray: number[] = toArray(42);
console.log(numberArray); // Output: [42]

let stringArray: string[] = toArray("hello");
console.log(stringArray); // Output: ["hello"]

該函數(shù)將類(lèi)型的 T 單個(gè)值轉(zhuǎn)換為包含該 toArray 值的數(shù)組。這個(gè)簡(jiǎn)單的實(shí)用函數(shù)展示了如何使用泛型來(lái)創(chuàng)建可重用的代碼，這些代碼可以毫不費(fèi)力地適應(yīng)不同的數(shù)據(jù)類(lèi)型。

如何將泛型接口與函數(shù)一起使用

interface Transformer<T, U> {
  (input: T): U;
}

function uppercase(input: string): string {
  return input.toUpperCase();
}

let transform: Transformer<string, string> = uppercase;
console.log(transform("hello")); // Output: HELLO

在此示例中，我們定義了一個(gè) Transformer 接口，其中包含兩個(gè)類(lèi)型參數(shù) T 和 U ，分別表示輸入和輸出類(lèi)型。然后，我們聲明一個(gè)函數(shù) uppercase 并將其分配給 類(lèi)型的 Transformer<string, string> 變量 transform 。這演示了如何使用泛型來(lái)定義函數(shù)的靈活接口。

總結(jié)

無(wú)論是函數(shù)、類(lèi)還是接口，泛型都為構(gòu)建可伸縮和可維護(hù)的 TypeScript 應(yīng)用程序提供了可靠的機(jī)制。理解和掌握泛型可以顯著提高您編寫(xiě)高效且無(wú)錯(cuò)誤的代碼的能力。

以上就是TypeScript泛型工作原理詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript泛型的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論