Що робить ключове слово interface у TS?

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

1. Що робить `interface`

interface у TypeScript описує контракт (або "форму") об'єкта, класу або функції: які властивості він повинен містити і якого вони типу.

Це не "реалізація", а опис форми даних - свого роду креслення.

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

javascript

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

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

Компілятор перевірить, що об'єкт user строго відповідає інтерфейсу User: усі поля присутні і мають правильні типи.

2. Інтерфейс ≠ Об'єкт

Важливо розуміти: interface не існує під час виконання - він потрібен лише TypeScript для перевірки типів на етапі компіляції.

Після збірки в JavaScript цей код перетворюється на:

javascript

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

Тобто інтерфейс "зникає" - він використовується лише як підказка і перевірка.

3. Необов'язкові поля

Якщо властивість може бути відсутньою, ставиться знак ?:

javascript

interface Product {
  id: number;
  name: string;
  description?: string; // необов'язкове поле
}

const shirt: Product = { id: 10, name: "Linen shirt" }; // OK

4. Тільки для читання (`readonly`)

Властивості можна зробити тільки для читання, щоб їх не можна було змінити:

javascript

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

const user: User = { id: 1, name: "Tim" };
user.id = 2; // Помилка: властивість тільки для читання

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

javascript

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

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

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

6. Інтерфейси можуть описувати класи

javascript

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

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

Ключове слово implements каже: "Цей клас повинен реалізувати інтерфейс Person (мати ті самі поля і методи)".

7. Наслідування інтерфейсів

Інтерфейси можна розширювати один одним за допомогою extends:

javascript

interface Animal {
  name: string;
}

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

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

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

8. Об'єднання інтерфейсів з однаковим ім'ям

На відміну від type, інтерфейси можуть зливатися (declaration merging):

javascript

interface User {
  id: number;
}

interface User {
  name: string;
}

const u: User = { id: 1, name: "Tim" }; // об'єднаний тип

Це зручно при розширенні бібліотек або глобальних типів.

9. Інтерфейси vs типи (`type`)

Можливість	`interface`	`type`
Розширення (`extends`)	Так	Так
Об'єднання (merging)	Так	Ні
Опис примітивів, union/tuple	Ні	Так
Реалізація класом (`implements`)	Так	Так
Існують у JS	Ні	Ні

Зазвичай interface використовують для об'єктів і класів, а type - для складніших комбінацій типів (union, intersection тощо).

Підсумок

interface - це інструмент TypeScript для опису структури даних.

Він дозволяє:

описувати форму об'єктів, функцій і класів;

задавати необов'язкові (?) і readonly поля;

розширювати інші інтерфейси;

контролювати, щоб об'єкти і класи відповідали очікуваній структурі.

При цьому інтерфейси не потрапляють у підсумковий JavaScript - вони потрібні лише для перевірки типів та автопідказок.

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

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

Premium

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