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

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

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

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

Контент

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

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

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

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

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

## 1. Загальна ідея

| Що роблять обидва | Як це працює |
|---|---|
| Описують структуру об'єкта | `{ id: number; name: string }` |
| Перевіряють сумісність за формою (структурна типізація) | Перевіряється наявність потрібних полів |
| Не існують під час виконання | Видаляються під час компіляції |
| Допомагають IDE з автопідказками | Показують поля і типи |

---

## 2. Основна відмінність

| Відмінність | **interface** | **type** |
|---|---|---|
| Основне призначення | Опис **структури об'єктів** і **контрактів класів** | Створення **псевдонімів** для будь-яких типів |
| Розширення інших типів | Через `extends` | Через `&` (перетин) |
| Об'єднання оголошень (merging) | Можливо | Неможливо |
| Union і примітиви | Ні | Так |
| Tuple і функціональні типи | Частково | Повністю |
| Реалізація класом (`implements`) | Так | Так |
| Використовується для API і моделей даних | Часто | Теж, але з універсальними типами |

---

## 3. Приклади наочно

### `interface` - описує **структуру об'єкта**

```javascript
interface User {
  id: number;
  name: string;
}

const u: User = { id: 1, name: "Tim" };
```

---

### `type` - створює **псевдонім типу**

```javascript
type User = {
  id: number;
  name: string;
};

const u: User = { id: 1, name: "Tim" };
```

> У цьому простому прикладі різниці немає - але далі починаються відмінності.

---

## 4. Наслідування і розширення

### Інтерфейси - через `extends`

```javascript
interface Person {
  name: string;
}

interface Employee extends Person {
  company: string;
}

const e: Employee = { name: "Tim", company: "Acme" };
```

---

### Типи - через перетин (`&`)

```javascript
type Person = { name: string };
type Employee = Person & { company: string };

const e: Employee = { name: "Tim", company: "Acme" };
```

> Поведінка аналогічна, але синтаксис інший.

---

## 5. Об'єднання інтерфейсів (merging)

Інтерфейси з однаковим ім'ям **зливаються**:

```javascript
interface User {
  id: number;
}

interface User {
  name: string;
}

const user: User = { id: 1, name: "Tim" }; // OK
```

Типи так не вміють:

```javascript
type User = { id: number };
type User = { name: string }; // Помилка: дублювання імені
```

> Тому інтерфейси часто використовують для **розширення зовнішніх бібліотек** (наприклад, `Express.Request`).

---

## 6. Union-типи (об'єднання) можливі лише з `type`

```javascript
type Status = "loading" | "success" | "error";
```

> Інтерфейс не може описувати "один із кількох станів".

---

## 7. Tuple, примітиви і функції

```javascript
type Point = [number, number]; // Кортеж
type ID = string | number;     // Union
type Greet = (name: string) => string; // Функція
```

> Інтерфейс може описувати лише об'єктоподібні структури.

---

## 8. Взаємозамінність

У 90% випадків **інтерфейси і типи взаємозамінні**,
особливо при описі об'єктів:

```javascript
interface A { id: number }
type B = { id: number }

let a: A = { id: 1 };
let b: B = { id: 2 };

a = b; // Сумісні
```

> Але якщо тобі потрібно об'єднувати типи (`|`, `&`) або описувати union, - обирай `type`.

---

## 9. Практичне правило

| Задача | Що обрати |
|---|---|
| Описуєш структуру об'єкта або класу | `interface` |
| Створюєш union (`A \| B`) або intersection (`A & B`) | `type` |
| Працюєш із примітивами (`string`, `number`, `boolean`) | `type` |
| Описуєш API або DTO-модель | `interface` (або `type`) - за стилем проєкту |
| Хочеш розширювати типи декларативно (merging) | `interface` |
| Хочеш об'єднати кілька різних типів в один | `type` |

---

## Підсумок

> **Обидва інструменти - для типізації, але з різною філософією:**
>
> - `interface` - для **опису форм об'єктів** і **контрактів класів**
> - `type` - для **гнучких комбінацій, псевдонімів і об'єднань типів**
>
> У більшості випадків їх можна комбінувати:
>
> ```javascript
> interface Base { id: number }
> type Extended = Base & { name: string };
> ```

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

Для рев’юера

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

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