Типи кортежів у TypeScript

Що таке типи кортежів?

Кортеж — це масив фіксованої довжини, де кожен елемент має конкретний тип на конкретній позиції. На відміну від звичайних масивів, кортежі забезпечують як кількість, так і типи елементів.

Основний синтаксис

typescript

// Масив: будь-яка кількість рядків
const names: string[] = ["Alice", "Bob"];

// Кортеж: точно 2 елементи з конкретними типами
const person: [string, number] = ["Alice", 25];

person[0]; // string
person[1]; // number
person[2]; // ❌ Помилка: Тип кортежу не має елемента за індексом '2'

Іменовані елементи кортежу

typescript

type Point = [x: number, y: number];
type Range = [start: number, end: number];
type RGB = [red: number, green: number, blue: number];

const point: Point = [10, 20];
const color: RGB = [255, 128, 0];

Необов'язкові елементи

typescript

type HttpResponse = [number, string, string?];
//                   статус  тіло    заголовки (необов'язковий)

const ok: HttpResponse = [200, "Успіх"];
const full: HttpResponse = [200, "Успіх", "application/json"];

Елементи решти в кортежах

typescript

// Перший елемент — рядок, решта — числа
type StringAndNumbers = [string, ...number[]];

const data: StringAndNumbers = ["scores", 90, 85, 92, 78];

// Перший і останній фіксовані, середній — гнучкий
type Padded = [first: string, ...middle: number[], last: boolean];

Кортежі тільки для читання

typescript

type ReadonlyPoint = readonly [number, number];

const p: ReadonlyPoint = [10, 20];
p[0] = 30; // ❌ Помилка: Не можна присвоїти '0', оскільки це властивість тільки для читання

// as const створює кортежі тільки для читання
const coords = [10, 20] as const; // readonly [10, 20]

Деструктуризація кортежів

typescript

type UserTuple = [string, number, boolean];

const user: UserTuple = ["Alice", 25, true];
const [name, age, isActive] = user;
// name: string, age: number, isActive: boolean

// React useState повертає кортеж
const [count, setCount] = useState(0);
// [number, Dispatch<SetStateAction<number>>]

Практичні випадки використання

Типи повернення функцій

typescript

function useState<T>(initial: T): [T, (value: T) => void] {
  let state = initial;
  const setState = (value: T) => { state = value; };
  return [state, setState];
}

function divide(a: number, b: number): [number, Error | null] {
  if (b === 0) return [0, new Error("Ділення на нуль")];
  return [a / b, null];
}

const [result, error] = divide(10, 3);

Варіативні типи кортежів

typescript

type Concat<A extends unknown[], B extends unknown[]> = [...A, ...B];

type Result = Concat<[1, 2], [3, 4]>; // [1, 2, 3, 4]

// Типізований еміттер подій
type EventArgs = {
  click: [x: number, y: number];
  focus: [element: HTMLElement];
  submit: [data: FormData, event: Event];
};

Особливість	Масив	Кортеж
Довжина	Змінна	Фіксована
Типи елементів	Один і той же тип	Різні типи на позиціях
Синтаксис	`string[]`	`[string, number]`
Випадок використання	Списки	Структуровані дані, пари

Кортежі ідеальні для даних з фіксованою структурою, таких як координати, пари ключ-значення та значення, що повертаються з функцій. useState в React — це найвідоміший приклад кортежу. Використовуйте іменовані елементи кортежу для кращої читабельності.

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

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

Premium

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

Дочитали статтю?

Практика завдань