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

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

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

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

Контент

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

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

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

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

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

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

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

Для рев’юера

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

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