Множинне наслідування

TypeScriptJunior~1 хв читання

1. Коротка відповідь

Так, можна! Для цього використовується ключове слово extends, після якого перелічуються кілька інтерфейсів через кому.

Приклад

javascript

interface A {
  a: string;
}

interface B {
  b: number;
}

interface C extends A, B {
  c: boolean;
}

const obj: C = {
  a: "Hello",
  b: 42,
  c: true,
};

Інтерфейс C тепер включає властивості з усіх трьох інтерфейсів: a, b і c.

2. Як це працює

TypeScript об'єднує всі властивості з інтерфейсів A і B.
Якщо успадковані поля не конфліктують - все добре.
Якщо та сама властивість оголошена в кількох інтерфейсах, TypeScript перевіряє, чи сумісні їхні типи.

Приклад сумісних властивостей

javascript

interface X {
  value: string;
}

interface Y {
  value: string;
}

interface Z extends X, Y {
  flag: boolean;
}

const z: Z = { value: "ok", flag: true }; // типи збігаються

Приклад конфліктних властивостей

javascript

interface X {
  value: string;
}

interface Y {
  value: number;
}

interface Z extends X, Y {} // Помилка: типи несумісні

TypeScript не може об'єднати string і number в одну властивість з однаковим ім'ям.

3. Наслідування можна поєднувати з власними полями

Ти можеш розширювати кілька інтерфейсів і додавати нові властивості:

javascript

interface Position {
  x: number;
  y: number;
}

interface Shape {
  color: string;
}

interface Circle extends Position, Shape {
  radius: number;
}

const c: Circle = {
  x: 0,
  y: 0,
  color: "red",
  radius: 10,
};

Circle об'єднує все: координати, колір і радіус.

4. Наслідування інтерфейсів з методами

javascript

interface CanFly {
  fly(): void;
}

interface CanSwim {
  swim(): void;
}

interface Duck extends CanFly, CanSwim {
  quack(): void;
}

const duck: Duck = {
  fly: () => console.log("Летить"),
  swim: () => console.log("Пливе"),
  quack: () => console.log("Кря!"),
};

Об'єкт duck зобов'язаний реалізувати всі методи з CanFly, CanSwim і Duck.

5. Можна комбінувати інтерфейси і `type`

Якщо у тебе є type, інтерфейс не може напряму наслідувати його, але можна використати перетин типів (&):

javascript

type Timestamped = { createdAt: Date };

interface Entity {
  id: number;
}

interface User extends Entity, Timestamped {  // не можна напряму
  name: string;
}

// альтернатива через &:
type UserFull = Entity & Timestamped & { name: string };

interface - лише інтерфейси через extends. Якщо потрібно об'єднати type та interface, використовуй &.

6. Приклад із реального проєкту

javascript

interface Identifiable {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface User extends Identifiable, Timestamped {
  name: string;
  email: string;
}

const u: User = {
  id: 1,
  createdAt: new Date(),
  updatedAt: new Date(),
  name: "Tim",
  email: "tim@example.com",
};

Один інтерфейс (User) об'єднує дані ідентифікації та часові мітки.

Підсумок

В TypeScript інтерфейс може наслідувати кілька інших інтерфейсів:

javascript
interface C extends A, B, D { ... }

Це дозволяє:

об'єднувати структури без дублювання коду;

створювати "ієрархію контрактів";

розширювати інтерфейси з методами, властивостями та опціями;

робити композицію поведінки (наприклад, CanFly, CanSwim, CanRun).

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.