迹忆客 专注技术分享

在 TypeScript 中扩展类型

使用交集类型来扩展 TypeScript 中的类型，例如 type TypeB = TypeA & {age: number;}。交集类型使用 & 符号定义，用于组合现有对象类型。

我们可以根据需要多次使用 & 运算符来构造类型。

type TypeA = {
  name: string;
};

type TypeB = TypeA & {
  age: number;
};

type TypeC = TypeB & {
  country: string;
};

const employee: TypeC = {
  name: '迹忆客',
  age: 30,
  country: 'China',
};

交集类型是使用 & 运算符定义的，并允许我们扩展现有的对象类型。

在 TypeScript 中向现有类型添加属性

我们还可以使用交集类型向现有类型添加属性。

type Employee = {
  id: number;
  name: string;
};

// 👇️ use intersection type
type Person = Employee & {
  country: string;
};

const person: Person = {
  id: 1,
  name: '迹忆客',
  country: 'China',
};

我们还可以使用交集类型来组合现有对象类型。

type TypeA = {
  name: string;
};

type TypeB = {
  age: number;
  country: string;
};

type TypeC = TypeA & TypeB;

const employee: TypeC = {
  name: '迹忆客',
  age: 30,
  country: 'China',
};

使用已定义的接口扩展类型

我们也可以使用 & 运算符来扩展具有已定义接口的对象类型。

type TypeA = {
  name: string;
  age: number;
};

interface InterfaceA {
  country: string;
}

type TypeB = TypeA & InterfaceA;

const employee: TypeB = {
  name: '迹忆客',
  age: 30,
  country: 'China',
};

我们可以根据需要多次使用 & 运算符来构造类型。

type TypeA = {
  name: string;
};

type TypeB = {
  country: string;
};

type TypeC = {
  age: number;
};

type TypeD = TypeA & TypeB & TypeC;

const employee: TypeD = {
  name: '迹忆客',
  age: 30,
  country: 'China',
};

在 TypeScript 中使用 type 扩展接口

如果必须使用 type 扩展接口，则必须使用 extends 关键字。

type TypeA = {
  name: string;
  country: string;
};

interface InterfaceA extends TypeA {
  age: number;
}

const employee: InterfaceA = {
  name: 'Bobby Hadz',
  age: 30,
  country: 'Chile',
};

如果我们必须扩展具有多种类型的接口，请用逗号分隔这些类型。

type TypeA = {
  name: string;
};

type TypeB = {
  country: string;
};

interface InterfaceA extends TypeA, TypeB {
  age: number;
}

const employee: InterfaceA = {
  name: '迹忆客',
  age: 30,
  country: 'China',
};

考虑 & 运算符和 extends 关键字的一种简单方法是，我们复制其他命名类型的成员并添加新成员以构造新类型。

扩展类型很有用，因为它向代码的读者发出信号，表明这些类型以某种方式相关。

扩展类型时覆盖属性的类型

在扩展类型时，我们可以使用省略实用程序类型来覆盖一个或多个属性的类型。

type TypeA = {
  id: string;
  name: string;
};

type TypeB = Omit<TypeA, 'id'> & {
  id: number; // 👈️ override the type of the property
  age: number;
  country: string;
};

const employee: TypeB = {
  id: 100,
  name: '迹忆客',
  age: 30,
  country: 'China',
};

TypeA 定义了一个字符串类型的 id 属性，但是， employee 对象应该有一个数字类型的 id。

Omit 实用程序类型通过从提供的类型中选取属性并删除指定的键来构造新类型。

实际上，我们从 TypeA 中删除了 id 属性，并使用新类型指定了 TypeB 中的 id 属性。

使用交集类型的主要好处是：

• 减少重复，因为我们不必在接口之间复制属性。
• 向我们代码的读者发出信号，表明这两种类型之间存在关系。
• 如果我们需要对多个属性执行此操作，请使用管道 | 特点。

type TypeA = {
  id: string;
  height: string;
  name: string;
};

type TypeB = Omit<TypeA, 'id' | 'height'> & {
  id: number;
  height: number;
  age: number;
  country: string;
};

const employee: TypeB = {
  id: 100,
  height: 173,
  name: '迹忆客',
  age: 30,
  country: 'China',
};

代码示例通过将 id 和 height 属性从类型中排除并使用 TypeB 中的新类型指定属性来覆盖它们的类型。