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

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

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

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

Контент

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

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

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

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

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

## 1. Визначення

> **Кортеж (tuple)** - це *масив фіксованої довжини*,
> де *кожен елемент має заздалегідь визначений тип і позицію*.

---

### Приклад

```javascript
const user: [string, number] = ["Tim", 25];
```

> Тут:
>
> - `user[0]` - завжди `string`,
> - `user[1]` - завжди `number`,
> - не можна додати третій елемент.

---

## 2. У чому різниця з масивом

| Особливість | Масив (`T[]`) | Кортеж (`[T1, T2, ...]`) |
|---|---|---|
| Довжина | змінна | фіксована |
| Тип елементів | однаковий | може відрізнятися |
| Індекси | не типізовані | кожен індекс строго типізований |
| Часте застосування | списки однотипних даних | пари, трійки, значення, що повертаються з функцій |

---

### Приклад відмінностей

```javascript
const arr: string[] = ["a", "b", "c"];
const tuple: [string, number] = ["id", 42];

arr.push("d"); // можна
tuple.push("oops"); // технічно можливо, але не рекомендується (див. нижче)
```

> До TS 4.0 можна було "допушити" елемент у кортеж,
> але сучасні версії TypeScript вже коректно **забороняють push** для фіксованих кортежів.

---

## 3. Типізація елементів за позиціями

```javascript
const point: [number, number] = [10, 20];
const rgb: [number, number, number] = [255, 128, 0];
const settings: [string, boolean, number] = ["dark", true, 60];
```

> Кожен елемент строго типізований.
> TypeScript не дозволить поміняти місцями типи:

```javascript
const wrong: [number, string] = ["a", 1]; // Помилка
```

---

## 4. Опціональні елементи в кортежі

Можна вказати необов'язкові позиції через `?`:

```javascript
type Point = [number, number?, number?];

const p1: Point = [10];        // лише X
const p2: Point = [10, 20];    // X і Y
const p3: Point = [10, 20, 30]; // X, Y, Z
```

---

## 5. Кортежі з rest-елементами

Якщо частина кортежу може повторюватися, можна використати **rest**:

```javascript
type StringPair = [string, string];
type StringList = [string, ...string[]];

const t1: StringList = ["first"];
const t2: StringList = ["first", "second", "third"];
```

> Це особливо корисно для сигнатур функцій зі змінною кількістю аргументів.

---

## 6. Приклад використання кортежів у функціях

### Функція повертає кілька значень:

```javascript
function useCounter(): [number, () => void] {
  let count = 0;
  const increment = () => count++;
  return [count, increment];
}

const [count, increment] = useCounter();
```

> Такий патерн часто використовується в React-хуках (`useState`, `useReducer` тощо).

---

## 7. Кортеж як параметр функції

```javascript
function logTuple(tuple: [string, number]) {
  console.log(`${tuple[0]} - ${tuple[1]}`);
}

logTuple(["id", 42]);
```

> TypeScript перевірить і порядок, і типи елементів.

---

## 8. Іменовані елементи (TS 4.0+)

TypeScript дозволяє давати **імена позиціям** у кортежі для читабельності:

```javascript
type UserTuple = [name: string, age: number, isAdmin: boolean];

const user: UserTuple = ["Tim", 25, true];
```

> Імена (`name`, `age`, `isAdmin`) не впливають на тип,
> але роблять код зрозумілішим в IDE та підказках.

---

## 9. Незмінні кортежі (readonly tuples)

Якщо потрібно заборонити зміну елементів:

```javascript
const coords: readonly [number, number] = [10, 20];

coords[0] = 30; // Помилка
coords.push(5); // Помилка
```

> Це корисно для координат, конфігів та будь-яких даних,
> які мають залишатися незмінними.

---

## Підсумок

| Можливість | Приклад | Опис |
|---|---|---|
| Базовий кортеж | `[string, number]` | Фіксовані типи і довжина |
| Опціональні елементи | `[number, number?]` | Необов'язкові позиції |
| Rest-елементи | `[string, ...string[]]` | Гнучка кількість хвостових елементів |
| Іменовані елементи | `[x: number, y: number]` | Покращує читабельність |
| Незмінний кортеж | `readonly [string, number]` | Забороняє мутацію |

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

Для рев’юера

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

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