Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Множинне наслідування». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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`).

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати534 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.