Що таке кортеж у TypeScript?

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

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]`	Забороняє мутацію

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

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

Premium

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