TypeScript 泛型的世界：解锁可重用性和灵活性

2023-09-27 11:54:14

TypeScript 深度剖析：TypeScript 中泛型的应用场景

泛型程序设计是程序设计语言中一种允许编写代码而不指定特定类型，并在实例化时作为参数指定这些类型的方法。在 TypeScript 中，泛型是一种强大的工具，它允许我们创建可重用的组件和算法，无论数据类型如何，它们都可以工作。

泛型的原理

泛型使用类型变量来表示未知类型。这些类型变量可以作为函数或类的参数传递。当使用泛型时，TypeScript 编译器会将代码推断为所有可能类型的联合。这意味着泛型代码可以处理任何类型的数据，而无需进行显式类型转换。

例如，我们可以创建一个泛型函数 map，它将数组中的每个元素转换为新类型：

function map<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}

这个函数接收一个数组 arr 和一个转换函数 fn。转换函数将数组中每个元素从类型 T 转换为类型 U。泛型类型变量 T 和 U 表示可以是任何类型的未知类型。

泛型的应用场景

TypeScript 中的泛型有许多应用场景，包括：

创建可重用的组件： 泛型允许我们创建可以在不同类型的数据上工作的组件。例如，我们可以创建一个通用列表组件，可以渲染任何类型的项目列表。
编写算法： 泛型可以简化算法的实现，因为我们可以编写代码而不指定特定类型。例如，我们可以编写一个通用排序算法，可以对任何类型的可排序数组进行排序。
提高代码可读性和可维护性： 泛型可以使代码更具可读性和可维护性。通过使用泛型，我们可以编写更简洁、更通用的代码，而无需重复自己。

示例

以下是一些在 TypeScript 中使用泛型的示例：

泛型列表：

class List<T> {
  private items: T[];

  constructor(items: T[]) {
    this.items = items;
  }

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

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

const list = new List<number>([1, 2, 3]);
list.add(4);
const item = list.get(2); // item 类型为 number

泛型排序：

function sort<T>(arr: T[], compareFn: (a: T, b: T) => number): T[] {
  return arr.sort(compareFn);
}

const sortedNumbers = sort([1, 2, 3], (a, b) => a - b); // sortedNumbers 类型为 number[]
const sortedStrings = sort(["a", "b", "c"], (a, b) => a.localeCompare(b)); // sortedStrings 类型为 string[]