如何在 TypeScript 中扩展接口

作者

在 TypeScript 中扩展接口

How to extend an Interface in TypeScript

使用extends关键字扩展 TypeScript 中的接口，例如
interface Dog extends Animal {age: number;}. 关键字允许我们从其他命名类型复制成员，extends并将新成员添加到最终的、更通用的接口中。

索引.ts
interface Animal {
  name: string;
  age: number;
}
interface Dog extends Animal {
  run(): void;
}

const a1: Dog = {
  name: 'Tom',
  age: 3,
  run() {
    console.log('the dog runs...');
  },
};

extends
关键字消除了必须在多个地方重复其他类型的成员的需要，并向代码的读者显示了接口之间的关系。

您可以通过用逗号分隔它们来从多个接口进行扩展。

索引.js
interface Dog {
  name: string;
}

interface Shepherd {
  guardian: boolean;
}

interface Animal extends Dog, Shepherd {
  age: number;
}

const a1: Animal = {
  name: 'Tom',
  guardian: true,
  age: 3,
};

扩展接口的主要好处是：

  1. 减少重复，因为我们不必在接口之间复制属性。
  2. 向我们代码的读者表明类型之间存在关系的意图。

您不需要在最终接口中添加任何新成员，可以使用extends关键字简单地组合接口。

索引.ts
interface Dog {
  name: string;
}

interface Shepherd {
  guardian: boolean;
}

// 👇️ Combine the Dog and Shepherd interfaces
interface Animal extends Dog, Shepherd {}

// 👇️ Alternatively use intersection type
type Animal2 = Dog & Shepherd;

const a1: Animal = {
  name: 'Tom',
  guardian: true,
};

您还可以使用extends关键字来扩展具有现有类型别名的接口。

索引.ts
type Dog = {
  name: string;
  age: number;
};

interface Shepherd {
  guardian: boolean;
}
interface Animal extends Dog, Shepherd {}

const a1: Animal = {
  name: 'Tom',
  age: 3,
  guardian: true,
};

扩展接口的主要原因是它向代码的读者发出信号，表明我们正在组合的类型在某种程度上是相关的。

如果我们只是重复接口之间的字段，连接就会丢失。

考虑extends关键字的一种简单方法是——我们正在从其他更具体、命名的类型中复制成员，并添加我们想要构建最终更通用接口的任何新成员。

如果您需要从您扩展的接口覆盖一个属性，您可以使用Omit实用程序类型。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

// for multiple use - Omit<Employee, 'id' | 'salary'>
interface Developer extends Omit<Employee, 'id'> {
  id: string; // 👈️ override type of id
  language: string;
}

const dev: Developer = {
  id: 'dev-1',
  name: 'Tom',
  salary: 100,
  language: 'TypeScript',
};

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

在示例中，我们在id从类型扩展时从类型中删除了属性，因此我们可以覆盖它的类型。 Employee

如果我们没有删除该属性并尝试在
Developer接口中指定不同的类型，我们就会得到一个错误。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

// ⛔️ Error: Interface 'Developer' incorrectly extends interface 'Employee'.
// Types of property 'id' are incompatible.
//   Type 'string' is not assignable to type 'number'.ts(2430)
interface Developer extends Employee {
  id: string; // 👈️ override type of id
  language: string;
}
TypeScript 告诉我们不能从接口扩展并使用具有不同的不兼容类型的相同属性名称。

解决这个问题的最好方法是在从接口扩展时删除类型并在新接口中覆盖它。

You can use a
union
of string literals to omit multiple properties from a type when extending.

index.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

// 👇️ omit `id` and `salary`
interface Developer extends Omit<Employee, 'id' | 'salary'> {
  id: string; // 👈️ override type of id
  salary: string; // 👈️ override type of salary
  language: string;
}

const dev: Developer = {
  id: 'dev-1',
  name: 'Tom',
  salary: '50 K',
  language: 'TypeScript',
};

To pass multiple properties to the Omit utility type, separate the properties
with a pipe |.

The same approach can be used to remove some properties from a type when extending – omit the properties and don’t declare them on the new interface.

Note that when extending from an interface, you can provide a more narrow type
for the same property name.

index.ts
interface Employee {
  id: number | string; // 👈️ number OR string (wide)
  name: string;
  salary: number;
}

interface Developer extends Employee {
  id: string; // 👈️ only string (narrow)
  language: string;
}

const dev: Developer = {
  id: 'dev-1', // 👈️ can only be string now
  name: 'Tom',
  salary: 100,
  language: 'TypeScript',
};

The id property in the Employee interface has a type of number or
string, but when extending from the interface, we specified a more narrow type
of string.

The id property in the Developer interface can only be of type string.

允许使用更具体的类型覆盖属性的类型，但是，您不能提供不兼容的类型。如果需要这样做，则必须使用Omit实用程序类型来删除特定属性并覆盖其类型。

您可以使用
implements
子句强制类满足一个或多个接口。

索引.ts
interface Dog {
  name: string;
  run(): void;
}

interface Shepherd extends Dog {
  guardian: boolean;
}

// ⛔ ️Error: Class 'Animal' incorrectly implements interface 'Shepherd'.
// Type 'Animal' is missing the following properties
// from type 'Shepherd': guardian, name, runts(2420)
class Animal implements Shepherd {}

该示例显示我们收到错误，因为该类未能正确实现接口。

要解决错误，请确保在类中正确实现接口。

索引.ts
interface Dog {
  name: string;
  run(): void;
}

interface Shepherd extends Dog {
  guardian: boolean;
}

class Animal implements Shepherd {
  name = 'Tom';
  guardian = true;

  run() {
    console.log('The animal runs');
  }
}

–

发表评论