返回

TypeScript 之 泛型 Generics 整理学习

前端

一、泛型是什么

泛型是一种允许我们在不指定具体类型的情况下创建函数、类和接口的方法。这使得我们可以创建可重用的组件,这些组件可以在多种数据类型上操作。

泛型使用类型参数来表示未知的数据类型。类型参数可以是任何合法的 TypeScript 类型,包括内置类型(如 string、number 和 boolean)和用户定义的类型(如类和接口)。

例如,我们可以创建一个简单的泛型函数来交换两个变量的值:

function swap<T>(a: T, b: T): void {
  const temp = a;
  a = b;
  b = temp;
}

这个函数可以使用任何数据类型来调用,例如:

swap(1, 2); // 交换两个数字
swap('a', 'b'); // 交换两个字符串

二、泛型的使用

泛型可以用于创建可重用的函数、类和接口。

1. 函数

泛型函数可以使用类型参数来表示未知的数据类型。这使得我们可以创建可重用的函数,这些函数可以在多种数据类型上操作。

例如,我们可以创建一个泛型函数来查找数组中的最大值:

function max<T>(array: T[]): T {
  let max = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] > max) {
      max = array[i];
    }
  }
  return max;
}

这个函数可以使用任何数据类型来调用,例如:

const numbers = [1, 2, 3, 4, 5];
const maxNumber = max(numbers); // 最大数字是 5

const strings = ['a', 'b', 'c', 'd', 'e'];
const maxString = max(strings); // 最大字符串是 'e'

2. 类

泛型类可以使用类型参数来表示未知的数据类型。这使得我们可以创建可重用的类,这些类可以在多种数据类型上操作。

例如,我们可以创建一个泛型类来表示一个栈:

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T {
    return this.items.pop();
  }

  peek(): T {
    return this.items[this.items.length - 1];
  }

  isEmpty(): boolean {
    return this.items.length === 0;
  }
}

这个类可以使用任何数据类型来实例化,例如:

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);

const stringStack = new Stack<string>();
stringStack.push('a');
stringStack.push('b');
stringStack.push('c');

3. 接口

泛型接口可以使用类型参数来表示未知的数据类型。这使得我们可以创建可重用的接口,这些接口可以在多种数据类型上操作。

例如,我们可以创建一个泛型接口来表示一个比较器:

interface Comparator<T> {
  (a: T, b: T): number;
}

这个接口可以用于创建比较两个值并返回比较结果的函数。我们可以使用这个接口来实现各种比较器,例如:

const numberComparator: Comparator<number> = (a, b) => a - b;

const stringComparator: Comparator<string> = (a, b) => a.localeCompare(b);

三、结语

泛型是 TypeScript 中一种强大的工具,允许您创建可重用和通用的组件。使用泛型,您可以轻松地创建可以在多种数据类型上操作的函数、类和接口。在本文中,我们探讨了 TypeScript 中泛型的概念和用法,并提供了一些示例来帮助您理解。