У чому відмінність типів від інтерфейсів?

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

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 };

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

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

Premium

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