Наследование одного или несколько интерфейсов в TypeScript

Расширяем интерфейс в TypeScript

Ключевое extends слово позволяет нам копировать члены из других именованных типов и добавлять новые члены в окончательный, более общий интерфейс.

index.ts:

interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  run(): void;
}

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

Ключевое слово Extends устраняет необходимость повторять члены других типов в нескольких местах.

Он также показывает связь между интерфейсами и читателем кода.

Расширьте несколько интерфейсов в TypeScript

Вы также можете использовать extends ключевое слово для расширения нескольких интерфейсов.

index.ts:

interface Person {
  name: string;
}

interface Employee {
  id: number;
  salary: number;
}

interface Developer extends Person, Employee {
  language: string;
}

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

Основные преимущества расширения интерфейсов

1. Уменьшение дублирования, поскольку нам не нужно копировать свойства между интерфейсами.
2. Сигнал читателю нашего кода о том, что между этими двумя типами существует связь.

Ключевое extends слово устраняет необходимость повторять члены других типов в нескольких местах.

Вы можете расширить любое количество интерфейсов, разделив интерфейсы запятой.

Вам не требуется добавлять новых членов в окончательный интерфейс, и вы можете использовать это extends ключевое слово для простого объединения интерфейсов.

index.ts:

interface Person {
  name: string;
}

interface Employee {
  id: number;
  salary: number;
}

// 👇️ Combine the Person and Employee interfaces
interface Developer extends Person, Employee {}

// 👇️ Alternatively use an intersection type
type Developer2 = Person & Employee;

const dev: Developer = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

В примере показано, как можно объединить два или более интерфейса, не добавляя к ним новых свойств. Вы также можете использовать типы пересечений.

index.ts:

interface Employee {
  id: number;
  name: string;
}

// 👇️ Using intersection Types
type Person2 = Employee & {
  country: string;
};

const person2: Person2 = {
  id: 2,
  name: 'Bobby Hadz',
  country: 'Germany',
};

Чаще всего типы пересечений используются для объединения существующих типов.

index.ts

interface A {
  a: string;
}

interface B {
  b: string;
}

// type Combined = {
//   a: string;
//   b: string;
// }
type Combined = A & B;

const combined: Combined = {
  a: 'hello',
  b: 'world',
};

Вы можете использовать типы пересечений, чтобы комбинировать столько типов, сколько необходимо. Последний тип содержит все члены всех указанных типов.