TypeScript之generics，成就程序代码的灵活性与复用性

2023-09-14 00:23:45

TypeScript泛型概述

TypeScript泛型是一种参数化类型，它允许我们在不指定具体类型的情况下定义函数、类和接口。泛型类型可以用一个或多个类型参数来表示，这些类型参数可以在函数、类或接口的定义中使用。

泛型的主要优点是提高代码的灵活性、可复用性和类型安全性。通过使用泛型，我们可以编写出可以处理不同类型数据的代码，从而提高代码的复用性。同时，泛型还可以帮助我们避免类型错误，提高代码的安全性。

TypeScript泛型函数

泛型函数是指在函数定义中使用类型参数的函数。泛型函数可以处理不同类型的数据，而无需为每种类型的数据编写单独的函数。

例如，我们可以编写一个泛型函数swap来交换两个变量的值，如下所示：

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

这个swap函数可以交换任何类型的数据，而无需指定具体的类型。我们可以使用这个函数来交换两个数字、两个字符串或两个对象。

TypeScript泛型类

泛型类是指在类定义中使用类型参数的类。泛型类可以创建出可以处理不同类型数据的对象，而无需为每种类型的数据创建单独的类。

例如，我们可以编写一个泛型类Stack来表示一个栈，如下所示：

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

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

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

这个Stack类可以存储任何类型的数据，而无需指定具体的类型。我们可以使用这个类来创建一个数字栈、一个字符串栈或一个对象栈。

TypeScript泛型约束

泛型约束是指在泛型类型参数上施加的限制。泛型约束可以确保泛型类型参数只能取某些特定的值。

例如，我们可以使用泛型约束来限制泛型函数swap只能交换数字类型的数据，如下所示：

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

这个swap函数只能交换数字类型的数据，如果我们尝试用它来交换其他类型的数据，就会报错。

TypeScript类型推断

TypeScript可以自动推断泛型类型参数的类型。这意味着我们通常不需要显式地指定泛型类型参数的类型。

例如，我们可以使用以下代码来创建一个数字栈：

const stack = new Stack();

TypeScript会自动推断出Stack的类型参数T是number类型。

TypeScript静态方法和属性

泛型类的静态方法和属性不属于任何特定的实例，而是属于整个类本身。静态方法和属性可以使用泛型类型参数，但它们不受泛型约束的限制。

例如，我们可以为Stack类添加一个静态方法createStack，如下所示：

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

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

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

  static createStack<T>(items: T[]): Stack<T> {
    const stack = new Stack<T>();
    for (const item of items) {
      stack.push(item);
    }
    return stack;
  }
}

这个createStack方法可以创建出一个新的栈，并用给定的数组初始化栈中的元素。

TypeScript实例方法和属性

泛型类的实例方法和属性属于类的每个实例。实例方法和属性可以使用泛型类型参数，但它们受到泛型约束的限制。

例如，我们可以为Stack类添加一个实例方法peek，如下所示：

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

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

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

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