深入探究TS中的extends和infer，轻松解决实际问题

2023-05-15 00:20:35

TypeScript 的 extends 和 infer：揭秘这两种强大工具的奥秘

简介

在 TypeScript 的世界里，extends 和 infer 是两个至关重要的，它们赋予了开发人员非凡的力量。它们共同作用，使我们能够创建更灵活、更通用的代码。

extends：继承的力量

extends 关键字允许我们创建一个新的类或接口，该类或接口继承了另一个类或接口的所有成员。就像一个数字家族树，继承允许我们从父类继承特征并添加我们自己的。

例如，以下代码展示了如何使用 extends 来创建 Dog 类，该类继承了 Animal 类的特性：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  speak() {
    console.log(`I'm ${this.name}`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`Woof! Woof!`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // I'm Buddy
dog.bark(); // Woof! Woof!

在这种情况下，Dog 类继承了 Animal 类的 name 属性和 speak 方法。此外，Dog 类还添加了自己的 bark 方法。

infer：类型推断的魔力

infer 关键字是一种强大的工具，可以帮助我们推断类型。它允许我们根据另一个类型的结构来创建新的类型。这就像是一种类型侦探，可以从现有类型中提取信息。

例如，以下代码展示了如何使用 infer 推断类型 T：

type T = typeof number;
type U = number;

console.log(T === U); // true

在上面的示例中，infer 用于从 typeof number 类型推断 T 类型。这表示 T 类型和 number 类型是相同的。

extends 和 infer 的联姻

extends 和 infer 可以携手解决各种现实世界的难题。它们允许我们创建通用的函数，这些函数可以处理任何类型的数据，就像瑞士军刀一样！

例如，我们可以使用它们来创建一个映射函数，该函数可以将一个数组中的所有元素映射到新类型：

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

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = map(numbers, (n) => n * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]