用 TypeScript 的泛型解决现实问题

2023-09-22 13:10:17

泛型是一套定义好的接口，我们可以通过实现泛型接口的方式复用代码。这种代码复用的方法可以使我们的代码更健壮、更安全，并且可以大大减少代码维护的工作量。

泛型是一种非常强大的特性，它为 TypeScript 开发人员提供了更加灵活和可重用的代码。

1. 数组泛型

在 TypeScript 中，数组是一种特殊的泛型。我们可以通过指定数组元素的类型来创建一个数组泛型。例如，我们可以创建一个字符串数组如下：

let names: string[] = ['Alice', 'Bob', 'Charlie'];

在这个例子中，names 是一个字符串数组。这意味着它只能包含字符串元素。如果我们尝试向这个数组添加一个非字符串元素，TypeScript 编译器会报错。

数组泛型可以用于任何类型的数组。例如，我们可以创建一个数字数组、布尔值数组、对象数组，等等。

2. 函数泛型

函数泛型允许我们定义可以接受和返回不同类型参数的函数。例如，我们可以创建一个计算两个数字和并返回结果的函数如下：

function add(a: number, b: number): number {
  return a + b;
}

在这个例子中，add 函数接受两个数字参数并返回一个数字结果。我们可以通过如下方式调用这个函数：

const result = add(1, 2);

在这个例子中，result 变量的值为 3。

函数泛型可以用于任何类型的函数。例如，我们可以创建一个接受一个字符串参数并返回一个字符串结果的函数、创建一个接受一个对象参数并返回一个对象结果的函数，等等。

3. 类泛型

类泛型允许我们定义可以接受和返回不同类型参数的类。例如，我们可以创建一个存储任何类型数据的泛型类如下：

class Box<T> {
  private value: T;

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

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

  public setValue(value: T): void {
    this.value = value;
  }
}

在这个例子中，Box 类是一个泛型类。这意味着它可以存储任何类型的数据。我们可以通过如下方式创建一个 Box 类的实例：

const box = new Box<number>(1);

在这个例子中，box 变量是一个 Box 类的实例，它存储了一个数字值。我们可以通过调用 getValue() 方法来获取这个值：

const value = box.getValue();

在这个例子中，value 变量的值为 1。

类泛型可以用于任何类型的类。例如，我们可以创建一个存储字符串数据的泛型类、创建一个存储对象数据的泛型类，等等。

4. 泛型约束

泛型约束允许我们限制泛型类型的范围。例如，我们可以创建一个只允许存储数字的泛型类如下：

class NumericBox<T extends number> {
  private value: T;

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

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

  public setValue(value: T): void {
    this.value = value;
  }
}