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

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

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

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

Контент

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

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

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

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

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

## 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 - потрібен лише для типізації.

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

Для рев’юера

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

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