Що таке інтерфейс у TypeScript?

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

1. Що таке інтерфейс

Інтерфейс у TypeScript - це контракт структури даних, який описує, які властивості та методи повинні бути присутні в об'єкта, і які в них типи.

Іншими словами: інтерфейс говорить «які дані очікуються», але не описує «як вони реалізовані».

Простий приклад

javascript

interface User {
  id: number;
  name: string;
  isAdmin: boolean;
}

const user: User = {
  id: 1,
  name: "Tim",
  isAdmin: true,
};

Компілятор перевірить, що об'єкт user містить усі поля (id, name, isAdmin) і що їхні типи відповідають інтерфейсу.

2. Інтерфейси потрібні лише на етапі компіляції

Інтерфейси не існують у JavaScript-коді - вони повністю видаляються після компіляції. TypeScript використовує їх лише для перевірки типів і підказок IDE.

javascript

interface Product {
  id: number;
  title: string;
}

Після компіляції цей код перетворюється на:

javascript

// (Інтерфейс зник)

3. Необов'язкові та тільки для читання властивості

Необов'язкові властивості - знак `?`

javascript

interface Product {
  id: number;
  title: string;
  description?: string; // можна не вказувати
}

Тільки для читання - `readonly`

javascript

interface User {
  readonly id: number;
  name: string;
}

const u: User = { id: 1, name: "Tim" };
u.id = 2; // Помилка: id не можна змінити

4. Інтерфейси можуть описувати функції

javascript

interface Greeter {
  (name: string): string;
}

const greet: Greeter = (name) => `Hello, ${name}!`;

Тут інтерфейс визначає сигнатуру функції - які аргументи і що вона повертає.

5. Інтерфейси та класи

Класи можуть реалізовувати інтерфейси через implements.

javascript

interface Person {
  name: string;
  sayHello(): void;
}

class User implements Person {
  constructor(public name: string) {}
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

TypeScript гарантує, що клас User реалізує все, що вимагає Person.

6. Успадкування інтерфейсів (`extends`)

Інтерфейси можна розширювати, створюючи ієрархію типів.

javascript

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

const rex: Dog = {
  name: "Rex",
  bark() {
    console.log("Woof!");
  },
};

Dog включає всі поля Animal, додаючи свої.

7. Індексні сигнатури

Якщо заздалегідь невідомі імена властивостей, можна описати їхню форму через індекс:

javascript

interface Dictionary {
  [key: string]: string;
}

const colors: Dictionary = {
  red: "#ff0000",
  green: "#00ff00",
};

8. Об'єднання інтерфейсів (Declaration Merging)

Якщо оголосити два інтерфейси з однаковим ім'ям - TypeScript об'єднає їх:

javascript

interface User {
  id: number;
}

interface User {
  name: string;
}

const u: User = { id: 1, name: "Tim" }; // об'єднана структура

Це особливість інтерфейсів - type так не вміє.

9. Різниця між `interface` і `type`

Можливість	`interface`	`type`
Опис об'єктів і класів	Так	Так
Розширення (`extends`)	Так	Так (`&`)
Union / Intersection	Ні	Так
Tuple, функції, примітиви	Частково	Так
Об'єднання декларацій (merging)	Так	Ні
Реалізація в класі (`implements`)	Так	Так

Правило просте:

interface - для об'єктів і класів,

type - для комбінацій і просунутих типів.

Підсумок

Інтерфейс (interface) у TypeScript - це механізм для опису структури даних (контракту): які властивості, методи і типи даних очікуються.

Він:

допомагає IDE підказувати і перевіряти код;

гарантує, що об'єкти і класи відповідають заданій структурі;

може успадковуватися і об'єднуватися;

не існує в підсумковому JavaScript - потрібен лише для типізації.

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

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

Premium

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