Що таке union типи?

TypeScriptJunior~2 хв читання

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 та автопідказок.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.