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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке union-тип

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

Синтаксис:

```javascript
type MyType = TypeA | TypeB | TypeC;
```

Тут вертикальна риска `|` означає "**або**".

---

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

```javascript
type ID = string | number;

let userId: ID;

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

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

---

## 2. Навіщо потрібні union-типи

Union-типи особливо корисні, коли:

- значення може надходити **у різних форматах** (наприклад, ID з бази чи API);
- функція може **приймати різні типи аргументів**;
- відповідь API може бути **успішною або помилковою**.

---

### Приклад: різні типи аргументів

```javascript
function formatId(id: string | number) {
  return `ID: ${id}`;
}

console.log(formatId(42));      //
console.log(formatId("abc123")) //
```

> Функція `formatId` працює і з рядками, і з числами.

---

## 3. Union-типи та об'єкти

Можна об'єднувати **цілі структури**, а не лише примітиви:

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

type Person = User | Admin;
```

Тепер змінна `Person` може бути:

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

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

---

## 4. Звуження типу (Type Narrowing)

Коли значення може бути кількох типів,
TypeScript уміє **розуміти, який саме тип використовується зараз**,
якщо ти перевіряєш його за допомогою умов `typeof`, `in`, `instanceof` тощо.

---

### Приклад з `typeof`

```javascript
function logId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // тепер TS знає, що id - рядок
  } else {
    console.log(id.toFixed(2));    // тепер TS знає, що id - число
  }
}
```

---

### Приклад з `in`

```javascript
function printUser(person: User | Admin) {
  if ("permissions" in person) {
    console.log("Адмін:", person.permissions);
  } else {
    console.log("Користувач:", person.name);
  }
}
```

> TypeScript сам "звузить" тип після перевірки властивості.

---

## 5. Union-типи з літералами (literal unions)

Дуже потужна особливість:
можна об'єднувати **конкретні значення**, а не лише типи.

```javascript
type Status = "loading" | "success" | "error";

let currentStatus: Status;

currentStatus = "loading"; //
currentStatus = "done";    // Помилка
```

> Це часто застосовують для статусів, ролей, станів UI та API.

---

## 6. Union-типи + функції

```javascript
function printValue(value: string | number | boolean) {
  console.log(`Значення: ${value}`);
}
```

> Можна передавати рядок, число або булеве значення,
> і TypeScript усе коректно обробить.

---

## 7. Union-типи vs Intersection-типи

| Тип | Опис | Приклад |
|---|---|---|
| `A \| B` | "A **або** B" (один із варіантів) | `string \| number` |
| `A & B` | "A **і** B" (обидва одразу) | `{name: string} & {age: number}` |

---

## 8. Приклад з реального проекту

### Відповідь API може бути двох типів:

```javascript
type SuccessResponse = {
  status: "success";
  data: { id: number; name: string };
};

type ErrorResponse = {
  status: "error";
  message: string;
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(res: ApiResponse) {
  if (res.status === "success") {
    console.log(res.data.name); // TS знає, що це SuccessResponse
  } else {
    console.error(res.message); // TS знає, що це ErrorResponse
  }
}
```

> TypeScript сам розуміє, який тип перед тобою -
> це називається **discriminated union** (дискриміноване об'єднання).

---

## Підсумок

> **Union-типи (**`|`**)** у TypeScript дозволяють описувати значення,
> які можуть належати **одному з кількох типів**.
>
> Застосовуються, коли:
>
> - дані можуть надходити в різних форматах;
> - функція приймає кілька варіантів аргументів;
> - відповіді API мають різні форми;
> - поля можуть бути обмежені конкретними літералами (`"success" | "error"`).
>
> Це робить код:
>
> - безпечнішим (TS перевіряє всі гілки),
> - гнучкішим (одна функція може обробляти різні типи),
> - і зрозумілішим для IDE та автопідказок.

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

Для рев’юера

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

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