Різні типи в масиві

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

1. Базовий спосіб - об'єднання типів через `|`

javascript

const mixed: (string | number)[] = [1, "two", 3, "four"];

Тут кожен елемент може бути або string, або number. TypeScript буде це перевіряти і підказувати в IDE.

Альтернатива через дженерик

javascript

const mixed: Array<string | number> = [1, "two", 3];

Те саме, але у generic-синтаксисі.

2. Масив із трьома і більше типами

javascript

const data: (string | number | boolean)[] = [42, "text", true];

Можна об'єднувати будь-яку кількість типів.

3. Масив об'єктів різних форм (наприклад, повідомлень)

javascript

type TextMessage = { type: "text"; text: string };
type ImageMessage = { type: "image"; url: string };

const messages: (TextMessage | ImageMessage)[] = [
  { type: "text", text: "Hello!" },
  { type: "image", url: "photo.jpg" },
];

TypeScript сам "звузить" тип під час перевірок:

javascript

for (const msg of messages) {
  if (msg.type === "text") console.log(msg.text);
  else console.log(msg.url);
}

4. Коли елементи мають фіксований порядок -> краще кортеж

Якщо кількість і порядок типів відомі заздалегідь:

javascript

const tuple: [string, number, boolean] = ["Tim", 25, true];

Це не "масив різних типів", а tuple (кортеж). Кожен індекс має свій тип:

tuple[0] - string

tuple[1] - number

tuple[2] - boolean

5. Приклад з об'єктами і примітивами упереміш

javascript

const values: (number | string | { id: number })[] = [
  1,
  "two",
  { id: 3 },
];

TypeScript дозволить лише ці типи.

6. Приклад з використанням `typeof` для виведення типу

javascript

const mixed = [1, "text", true] as const;

type MixedElement = typeof mixed[number];
// MixedElement -> 1 | "text" | true

Через as const можна отримати union із конкретних значень масиву.

7. Масив елементів різних класів (через спільний базовий тип)

javascript

class Dog { bark() {} }
class Cat { meow() {} }

const pets: (Dog | Cat)[] = [new Dog(), new Cat()];

TypeScript розуміє, який метод доступний у якого екземпляра:

javascript

pets.forEach(pet => {
  if (pet instanceof Dog) pet.bark();
  else pet.meow();
});

8. Що буде, якщо не вказати тип явно

javascript

const arr = [1, "hi"];
// Тип виведеться автоматично як (string | number)[]

TypeScript сам виведе union-типи елементів, якщо ти змішав їх під час ініціалізації.

Підсумок

Завдання	Синтаксис	Приклад
Примітиви різних типів	`(string \| number)[]`	`[1, "a", 2]`
Кілька типів	`(string \| number \| boolean)[]`	`[1, "x", true]`
Масив об'єктів різних форм	`(A \| B)[]`	`[{type:"a"}, {type:"b"}]`
Фіксований порядок типів	`[string, number, boolean]`	`["a", 1, true]`
Через generic	`Array<string \| number>`	`[1, "b"]`
Автоматичне визначення	без явного типу	`[1, "x"] // -> (string

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

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

Premium

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