Об'єднання кількох типів
Приклад: об'єднання трьох і більше типів
javascript
let value: string | number | boolean;
value = "Hello"; // string
value = 42; // number
value = true; // boolean
value = null; // Помилка - null не входить до об'єднанняТобто
valueможе бути рядком, числом або булевим значенням, але нічим іншим.
Приклад з типами через type
javascript
type Status = "loading" | "success" | "error" | "idle";
let current: Status;
current = "loading"; // ok
current = "error"; // ok
current = "pending"; // Помилка - не входить до unionТакі рядкові об'єднання часто використовують для станів, ролей, статусів і режимів.
Приклад: об'єднання різних структур
javascript
type User = { name: string };
type Admin = { name: string; permissions: string[] };
type Guest = { guestId: number };
type Person = User | Admin | Guest;
const a: Person = { name: "Tim" }; // User
const b: Person = { name: "Alex", permissions: [] }; // Admin
const c: Person = { guestId: 123 }; // Guest
Personтепер може представляти будь-яку з трьох форм даних.
Скільки можна об'єднувати?
Скільки завгодно. Обмежень щодо кількості об'єднаних типів немає:
javascript
type Many = string | number | boolean | null | undefined | bigint | symbol;TypeScript спокійно обробить це - головне, щоб код залишався читабельним та осмисленим.
Запам'ятай
| Властивість | Опис |
|---|---|
| Оператор об'єднання | ` |
| Кількість типів | Не обмежена |
| Призначення | Змінна або функція може приймати одне із зазначених значень |
| Часте застосування | Статуси, ролі, стани, різні варіанти даних |
Приклад із життя:
javascript
type PaymentMethod = "cash" | "card" | "apple-pay" | "google-pay" | "paypal";
function pay(method: PaymentMethod) {
console.log("Оплата через:", method);
}
pay("cash"); // ok
pay("paypal"); // ok
pay("bitcoin"); // Помилка - не входить до unionКоротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.