TypeScript 泛型基础设施，运用场景介绍，以及实现方法剖析

2024-01-06 04:23:52

TypeScript 泛型基础设施深入剖析

前言

在软件开发领域，我们经常需要处理不同类型的数据，需要一种方法来应对不同类型数据的处理，而不会造成重复的代码。TypeScript 的泛型为我们提供了一种定义可重用组件的方法，这些组件可以在多种数据类型上工作。泛型允许我们在编译时声明变量或函数可以使用的类型，而无需在运行时指定这些类型。这可以使我们的代码更加灵活和可重用。

泛型类

泛型类允许我们创建可用于多种数据类型的类。例如，我们可以创建一个名为 List 的泛型类，该类可以存储任何类型的数据。我们可以通过指定泛型参数 T 来创建一个 List 类的实例，T 表示该列表中存储的数据类型。

class List<T> {
  private data: T[] = [];

  add(item: T) {
    this.data.push(item);
  }

  remove(item: T) {
    const index = this.data.indexOf(item);
    if (index > -1) {
      this.data.splice(index, 1);
    }
  }

  get(index: number): T {
    return this.data[index];
  }
}

我们可以通过以下方式使用 List 类：

const numbers = new List<number>();
numbers.add(1);
numbers.add(2);
numbers.add(3);

const strings = new List<string>();
strings.add("hello");
strings.add("world");
strings.add("!");

泛型接口

泛型接口允许我们定义可用于多种数据类型的接口。例如，我们可以创建一个名为 Comparable 的泛型接口，该接口定义了一个 compareTo 方法，该方法用于比较两个值。我们可以通过指定泛型参数 T 来创建一个 Comparable 接口的实例，T 表示要比较的值的类型。

interface Comparable<T> {
  compareTo(other: T): number;
}

我们可以通过以下方式使用 Comparable 接口：

class Person implements Comparable<Person> {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  compareTo(other: Person): number {
    return this.age - other.age;
  }
}

const people = [
  new Person("Alice", 20),
  new Person("Bob", 30),
  new Person("Charlie", 40),
];

people.sort((a, b) => a.compareTo(b));

console.log(people);

泛型函数

泛型函数允许我们创建可用于多种数据类型的函数。例如，我们可以创建一个名为 sum 的泛型函数，该函数用于计算一组值的总和。我们可以通过指定泛型参数 T 来创建一个 sum 函数的实例，T 表示要计算总和的值的类型。

function sum<T>(values: T[]): T {
  let total = 0;
  for (const value of values) {
    total += value;
  }
  return total;
}

const numbers = [1, 2, 3, 4, 5];
const sumOfNumbers = sum(numbers);

console.log(sumOfNumbers); // 15