Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Різні типи в масиві». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати488 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.