TypeScript中的 extends 和 infer：深入理解和应用

2024-01-23 10:22:24

extends

extends 是 TypeScript 中用于类型扩展的。它允许我们从一个类型派生出另一个类型，并继承前者的成员和特性。

class Animal {
  name: string;
  age: number;

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

  speak() {
    console.log(`My name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Dog extends Animal {
  breed: string;

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

  bark() {
    console.log(`Woof! Woof! I am ${this.name} the ${this.breed}.`);
  }
}

const dog = new Dog('Buddy', 3, 'Golden Retriever');
dog.speak(); // My name is Buddy and I am 3 years old.
dog.bark(); // Woof! Woof! I am Buddy the Golden Retriever.

在上面的示例中，我们定义了一个 Animal 类，它具有 name 和 age 两个属性和一个 speak() 方法。我们还定义了一个 Dog 类，它从 Animal 类继承，并添加了 breed 属性和一个 bark() 方法。

通过使用 extends，我们可以轻松地创建新的类型，并复用现有类型的特性。这使得 TypeScript 成为构建大型、复杂应用程序的理想选择。

infer

infer 是 TypeScript 中用于类型推断的关键字。它允许我们从一个类型中推断出另一个类型。

type T extends {} = {};

type TKeys = keyof T; // 推断出 T 的键类型

type TValues = T[keyof T]; // 推断出 T 的值类型

在上面的示例中，我们定义了一个 T 类型，它可以是任何对象类型。我们使用 infer 推断出 T 的键类型和值类型。

infer 还可以用于更复杂的类型推断场景。例如，我们可以使用它来推断泛型函数的参数类型和返回值类型。

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

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = map(numbers, (n) => n * 2); // 推断出 doubledNumbers 的类型为 number[]