Об'єднання примітивів та об'єктів
Приклад: примітив + об'єкт в одному union
javascript
type User = { name: string; age: number };
let value: string | User;
value = "Anonymous"; // рядок - підходить
value = { name: "Tim", age: 25 }; // об'єкт - теж підходить
value = 42; // Помилка - число не входить в unionТут
valueможе бути або рядком, або об'єктом з полямиnameіage.
Приклад: функція з union із примітивів і об'єктів
javascript
type User = { id: number; name: string };
function printUser(user: string | User) {
if (typeof user === "string") {
console.log(`Ім'я користувача: ${user}`);
} else {
console.log(`ID: ${user.id}, Ім'я: ${user.name}`);
}
}
printUser("Tim"); // рядок
printUser({ id: 1, name: "Tim" }); // об'єктМи використовуємо type narrowing (
typeof user === "string")
- щоб звузити тип і безпечно звертатися до потрібних властивостей.
Приклад: об'єднання кількох форм даних
javascript
type Product = { name: string; price: number };
type ProductInput = string | number | Product;
function handleProduct(p: ProductInput) {
if (typeof p === "string") {
console.log("Товар за назвою:", p);
} else if (typeof p === "number") {
console.log("Товар за ID:", p);
} else {
console.log("Товар як об'єкт:", p.name, p.price);
}
}Тут
pможе бути рядком, числом або об'єктом - TypeScript гарантує, що ти перевіриш тип перед використанням.
Приклад: об'єкт + null або undefined
Дуже частий випадок - об'єкт може бути відсутнім:
javascript
type User = { id: number; name: string } | null;
let currentUser: User = null; // OK
currentUser = { id: 1, name: "Tim" }; // OKЦе дозволяє явно контролювати стан "немає даних".
Важливо розуміти
Коли ти об'єднуєш примітиви і об'єкти, TypeScript:
- вимагає перевірки типу перед доступом до властивостей;
- дозволяє використовувати спільні властивості, якщо вони є у всіх варіантів.
Приклад:
javascript
type A = { id: number };
type B = string;
function show(a: A | B) {
// console.log(a.id); // не можна - string не має id
if (typeof a !== "string") {
console.log(a.id); // безпечно
}
}Підсумок
| Чи можна об'єднувати? | Так |
|---|---|
| Примітиви + об'єкти | Можна |
| Скільки завгодно типів | Без обмежень |
| Перевірка перед використанням | Обов'язкова |
| Використовується для | Універсальних функцій, API-відповідей, гнучких структур |
Коротко:
Union-типи в TypeScript можна змішувати вільно -
string | number | { name: string } | null- це цілком допустимо.Головне - перевіряй тип перед зверненням до властивостей.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.