TypeScript 带你秒懂交叉类型和泛型

2022-11-03 03:31:17

交叉类型与泛型：提升 TypeScript 代码的灵活性与重用性

TypeScript 作为一门类型化语言，为我们提供了丰富的类型系统，其中交叉类型和泛型扮演着举足轻重的角色。掌握这两大概念，将极大提升你编写 TypeScript 代码的效率与可维护性。

交叉类型：融合不同类型的强势

想象这样一个场景，我们需要创建一个表示员工信息的对象，其中包含姓名、年龄和地址。这三个属性分别属于不同的类型，姓名为字符串、年龄为数字、地址为一个嵌套对象。传统做法是创建多个独立的类型，但交叉类型的出现让事情变得更加简单。

交叉类型允许我们使用 & 运算符组合多个类型，创建一个包含所有原始类型属性的新类型。举个例子，我们就可以这样定义一个名为 Employee 的交叉类型：

type Employee = {
  name: string;
  age: number;
} & {
  address: {
    street: string;
    city: string;
    state: string;
    zip: number;
  }
};

通过这种方式，我们创建了一个融合了所有必要属性的新类型 Employee，可以轻松用于创建具有这些属性的对象。

泛型：打造可复用组件的利器

泛型是 TypeScript 中另一个强大的工具，它允许我们创建可复用的组件，而无需编写重复的代码。这在创建诸如数组最大值查找之类的函数时非常有用。

假设我们想创建一个名为 max 的函数，它可以获取任何类型数组中的最大值。使用泛型，我们可以在函数签名中引入一个类型参数 T，表示数组元素的类型。然后，函数内部的所有类型检查和操作都将基于此参数。

function max<T>(array: T[]): T {
  if (array.length === 0) {
    throw new Error("Array is empty.");
  }
  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"