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

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

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

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

Контент

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

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

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

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

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

## Що таке об'єднання типів (Union Type)

**Об'єднання типів** - це тип, який може бути **одним із кількох указаних варіантів**.

У TypeScript об'єднання створюються через вертикальну риску `|`:

```javascript
let value: string | number;
```

Це означає:

> `value` може бути **або рядком**, **або числом**, але нічим іншим.

---

## Приклад 1. Найпростіше об'єднання

```javascript
let id: string | number;

id = 42;       // OK
id = "42";     // OK
id = true;     // Помилка
```

> Так ти обмежуєш набір допустимих типів,
> але при цьому зберігаєш гнучкість.

---

## Приклад 2. Об'єднання в параметрах функції

```javascript
function printId(id: string | number) {
  console.log("ID:", id);
}

printId(123);     // OK
printId("abc");   // OK
```

> Функція приймає **або рядок**, **або число**, але нічого іншого.

---

## Приклад 3. Не всі методи доступні при union

Коли TypeScript не може точно визначити тип під час виконання,
він **дозволяє лише спільні методи** для всіх типів.

```javascript
function printId(id: string | number) {
  console.log(id.length); // Помилка - у number немає .length
}
```

Рішення: **звузити тип** (type narrowing):

```javascript
function printId(id: string | number) {
  if (typeof id === "string") {
    console.log("Довжина рядка:", id.length);
  } else {
    console.log("Число:", id.toFixed(2));
  }
}
```

> Після перевірки `typeof` TypeScript "розуміє", який конкретно тип використовується.

---

## Приклад 4. Union усередині об'єктів

Можна об'єднувати **різні форми об'єктів**:

```javascript
type User = { name: string; age: number };
type Admin = { name: string; permissions: string[] };

type Person = User | Admin;

const user1: Person = { name: "Tim", age: 25 };          // OK
const user2: Person = { name: "Alex", permissions: [] }; // OK
const user3: Person = { name: "Bob" };                   // Помилка: age або permissions обов'язкові
```

---

## Приклад 5. Використання в switch (discriminated unions)

TypeScript особливо добре працює з об'єднаннями,
якщо додати **дискримінатор** - спільне поле для розрізнення варіантів.

```javascript
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side ** 2;
  }
}

area({ kind: "circle", radius: 10 }); // OK
```

> Це називається **дискриміноване об'єднання (discriminated union)** -
> один із найпотужніших патернів у TS.

---

## Приклад 6. Об'єднання літеральних типів

Можна створювати **обмежені набори значень**:

```javascript
type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up";     // OK
move = "down";   // OK
move = "forward"; // Помилка
```

> Дуже зручно для статусів, ролей, режимів тощо.

---

## Приклад 7. Об'єднання з null і undefined

Типові приклади - змінні, які **можуть бути невизначені**:

```javascript
let username: string | null = null;

function printName(name: string | undefined) {
  if (name) {
    console.log(name.toUpperCase());
  }
}
```

> Такі об'єднання допомагають TypeScript захищати код від помилок "Cannot read property of null".

---

## Приклад 8. Об'єднання з type alias та інтерфейсами

```javascript
type Status = "loading" | "success" | "error";
type Response = { status: Status; data?: string };

function handleResponse(res: Response) {
  if (res.status === "success") {
    console.log(res.data);
  }
}
```

---

## Union vs Intersection (`|` vs `&`)

| Оператор | Назва | Приклад | Значення |
|---|---|---|---|
| `\|` | **Union (об'єднання)** | `A \| B` | об'єкт, який є або `A`, або `B` |
| `&` | **Intersection (перетин)** | `A & B` | об'єкт, який є і `A`, і `B` одночасно |

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

```javascript
type Dog = { bark: () => void };
type Cat = { meow: () => void };

type PetUnion = Dog | Cat; // або пес, або кіт
type PetBoth = Dog & Cat;  // і те, і те (істота, що вміє гавкати і нявкати)
```

---

## Підсумок

| Концепція | Приклад |
|---|---|
| Простий union | `string \| number` |
| Об'єднання об'єктів | `{a: number} \| {b: string}` |
| Літеральні об'єднання | `"on" \| "off"` |
| Дискримінований union | `{ kind: "circle" } \| { kind: "square" }` |
| Union з null/undefined | `string \| null` |

---

### Просте визначення:

> **Union** (`|`) - це "АБО" для типів.
>
> Змінна може бути **одним із кількох типів**,
> і TypeScript вимагає, щоб ти явно вказав, **який саме** використовується під час роботи.

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

Для рев’юера

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

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