В чому різниця між interface та type в TypeScript?

Уявіть, що вам потрібно описати, як виглядає автомобіль. У TypeScript є два основних інструменти для цього: interface та type. Обидва можуть описати структуру об'єкта, але кожен має свої особливості.

Простими словами

Interface - це як шаблон або контракт. Говорить "об'єкт повинен мати ці властивості".

Type - це як псевдонім або ярлик. Може описувати не тільки об'єкти, а й інші типи даних.

Interface - контракт для об'єктів

Базовий приклад

interface Car {
  brand: string;
  model: string;
  year: number;
  isElectric?: boolean; // знак ? означає "необов'язково"
}

const myCar: Car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2023,
  isElectric: true
};

Розширення - створюємо нові типи на основі існуючих

interface Vehicle {
  brand: string;
  year: number;
}

// SportsCar отримує всі властивості Vehicle + додає свої
interface SportsCar extends Vehicle {
  maxSpeed: number;
  engine: string;
}

const ferrari: SportsCar = {
  brand: "Ferrari",
  year: 2024,
  maxSpeed: 340,
  engine: "V12"
};

Особливість: можна "доповнювати"

interface User {
  name: string;
}

// В іншому місці коду можемо додати нові поля
interface User {
  age: number;
}

// Тепер User має і name, і age
const user: User = {
  name: "Олег",
  age: 25
};

Type - універсальний інструмент

Базовий приклад (схожий на interface)

type Car = {
  brand: string;
  model: string;
  year: number;
  isElectric?: boolean;
};

const myCar: Car = {
  brand: "BMW",
  model: "i4",
  year: 2023
};

Потужні можливості - Union типи

type Color = "red" | "green" | "blue"; // може бути тільки одне з трьох значень
type Size = "small" | "medium" | "large";

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

function showMessage(status: Status) {
  if (status === "loading") {
    console.log("Завантаження...");
  }
  // TypeScript знає, що status може бути тільки "success" або "error"
}

Комбінування типів

type Person = {
  name: string;
  age: number;
};

type Employee = {
  position: string;
  salary: number;
};

// Поєднуємо два типи в один
type Worker = Person & Employee;

const worker: Worker = {
  name: "Марія",
  age: 30,
  position: "Developer",
  salary: 60000
};

Головні відмінності

Практичні приклади

Interface для API відповідей

interface ApiResponse {
  status: number;
  message: string;
}

interface UserResponse extends ApiResponse {
  data: {
    id: string;
    name: string;
    email: string;
  };
}

Type для станів компонента

type LoadingState = "idle" | "loading" | "success" | "error";

type FormData = {
  name: string;
  email: string;
};

type AppState = {
  user: FormData | null;
  status: LoadingState;
};

Коли що використовувати?

Використовуйте Interface якщо:

• ✅ Описуєте структуру об'єкта
• ✅ Можете потребувати розширення в майбутньому
• ✅ Створюєте бібліотеку (інші можуть доповнити ваші типи)
• ✅ Описуєте API або контракти

// Хороший випадок для interface
interface User {
  id: string;
  name: string;
  email: string;
}

Використовуйте Type якщо:

• ✅ Створюєте Union типи (string | number)
• ✅ Поєднуєте кілька типів
• ✅ Створюєте псевдоніми для складних типів
• ✅ Використовуєте умовні типи

// Хороший випадок для type
type Theme = "light" | "dark";
type ApiStatus = "loading" | "success" | "error";
type CombinedData = UserData & PreferencesData;

Підсумок

• Interface - для структур об'єктів, які можуть розширюватися
• Type - для всього іншого (Union, псевдоніми, складні типи)
• Обидва варіанти валідні для простих об'єктів
• У сучасному TypeScript частіше використовують Type через більшу гнучкість

Найголовніше - бути послідовним у своєму проекті та обирати інструмент відповідно до задачі!