Як об'єднати кілька типів?

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

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 };

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

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

Premium

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