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

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

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

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

Контент

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

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

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

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

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

## 1. Об'єднання типів через `|` **(Union Type)**

> **Union (об'єднання)** означає: значення може бути **одним із декількох типів**.

---

### Приклад 1: базові типи

```javascript
type ID = string | number;

let userId: ID;

userId = 42;      // число
userId = "abc123"; // рядок
userId = true;     // Помилка
```

> `userId` може бути або `string`, або `number`, але не чимось іншим.

---

### Приклад 2: кілька структур

```javascript
type Admin = { role: "admin"; permissions: string[] };
type User = { role: "user"; name: string };

type Person = Admin | User;

const p1: Person = { role: "admin", permissions: ["delete", "edit"] }; // добре
const p2: Person = { role: "user", name: "Tim" };                       // добре
```

> TypeScript слідкуватиме, щоб об'єкт відповідав **хоча б одній** з форм.

---

### Як відрізняти типи всередині union-у

Можна використовувати **type narrowing** (звуження типу):

```javascript
function printRole(person: Person) {
  if (person.role === "admin") {
    console.log(person.permissions); // TS розуміє, що це Admin
  } else {
    console.log(person.name); // TS розуміє, що це User
  }
}
```

---

## 2. Перетин типів через `&` **(Intersection Type)**

> **Intersection (перетин)** об'єднує **всі поля з кількох типів**.
> Об'єкт повинен відповідати **всім об'єднаним типам одночасно**.

---

### Приклад 1: об'єднання структур

```javascript
type Person = { name: string };
type Contact = { email: string };

type User = Person & Contact;

const u: User = { name: "Tim", email: "tim@example.com" }; // обидва поля обов'язкові
```

> Тут `User` включає властивості **з обох типів**: `name` і `email`.

---

### Приклад 2: об'єднання кількох інтерфейсів і типів

```javascript
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

type Identifiable = { id: number };

type Entity = Timestamped & Identifiable;

const e: Entity = {
  id: 1,
  createdAt: new Date(),
  updatedAt: new Date(),
};
```

> `Entity` тепер - це "склейка" двох структур.

---

### Приклад несумісних перетинів

```javascript
type A = { value: string };
type B = { value: number };

type C = A & B; // value повинен бути і string, і number одночасно -> never

const c: C = { value: "test" }; // Помилка
```

> Якщо поля мають різні типи, TypeScript не може об'єднати їх,
> результатом буде тип `never` (неможливий тип).

---

## 3. Union + Intersection разом

Можна комбінувати обидва підходи:

```javascript
type Admin = { role: "admin"; permissions: string[] };
type User = { role: "user"; name: string };

type Person = (Admin | User) & { id: number };
```

> Тут `Person` повинен мати поле `id`,
> а також відповідати або `Admin`, або `User`.

Приклад використання:

```javascript
const a: Person = { id: 1, role: "admin", permissions: ["delete"] };
const u: Person = { id: 2, role: "user", name: "Tim" };
```

---

## 4. Навіщо об'єднувати типи

**Union (**`|`**)** - коли дані бувають **різних форм** (варіанти).
**Intersection (**`&`**)** - коли потрібно **склеїти кілька структур** разом.

---

## 5. Приклади з реального життя

| Сценарій | Що використати | Приклад |
|---|---|---|
| `id` може бути рядком або числом | `string \| number` | `type ID = string |
| Користувач може бути `Admin` або `User` | `Admin \| User` | union |
| Об'єкт об'єднує поля `User` і `Timestamped` | `User & Timestamped` | intersection |
| API-відповідь може бути успішною або з помилкою | `SuccessResponse \| ErrorResponse` | union |
| Модель включає властивості з кількох базових | `Base & Metadata & Permissions` | intersection |

---

## Підсумок

> У TypeScript типи можна об'єднувати двома способами:
>
> **Union (**`|`**)** - *"або"* -> один з декількох варіантів
> **Intersection (**`&`**)** - *"і"* -> поєднує все в одному типі
>
> Комбінуй їх, щоб описувати складні структури:
>
> ```javascript
> type Person = (Admin | User) & { id: number };
> ```

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

Для рев’юера

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

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