LETUNOFF DOCS

TS. Массивы и кортежи

🧱 Суть

В TypeScript number[] и [number, number] выглядят похоже, но описывают разные структуры данных.

Главное отличие:

  • number[] → массив любой длины
  • [number, number] → кортеж с фиксированным количеством элементов

📦 Проблема

Обычный массив не гарантирует количество элементов.

Например:

const size: number[] = [1920, 1080];

TypeScript знает только: «это массив чисел»
Но не знает, что элементов должно быть именно два.

Можно случайно получить:

const size: number[] = [1920];

или:

const size: number[] = [1920, 1080, 1440];

✅ Решение

Использовать tuple (кортеж), когда структура имеет фиксированное количество значений.

💻 Код

Массив (number[])

Обычный массив чисел:

const values: number[] = [1, 2, 3, 4];

Допустимо:

const values: number[] = [42];

Количество элементов не ограничено.

Кортеж ([number, number])

Кортеж описывает точную структуру:

const size: [number, number] = [1920, 1080];

Здесь:

size[0] → number
size[1] → number

Оба значения обязательны.

Ошибка:

const size: [number, number] = [800];

Не хватает второго элемента.

Где использовать tuple

Когда значения имеют фиксированный смысл:

Размер:

const size: [number, number] = [1920, 1080];

Где:

[width, height]

Координаты:

const point: [number, number] = [100, 200];

Где:

[x, y]

Grid:

const grid: [number, number] = [columns, rows];

Ошибка при обновлении tuple

Нельзя:

updated = [...updated, updated[1]: Number(value)];

Причины:

  1. updated[1]: value – такой синтаксис используется только в объектах:
{
  key: value
}
  1. Spread:
[...updated, value]

добавляет новый элемент, а не заменяет существующий.

Правильное обновление

Изменить второе значение:

setGrid((prev) => [
  prev[0],
  Number(e.target.value),
]);

Изменить первое значение:

setGrid((prev) => [
  Number(e.target.value),
  prev[1],
]);

Универсальное обновление по индексу

setGrid((prev) => {
  const updated: [number, number] = [...prev];
 
  updated[1] = Number(e.target.value);
 
  return updated;
});

Здесь:

  1. создаётся копия tuple
  2. изменяется нужный индекс
  3. возвращается новый tuple

🎯 Вывод

  • number[] → массив чисел любой длины
  • [number, number] → строго два числа
  • tuple нужен, когда порядок и количество элементов имеют значение
  • для координат, размеров и похожих структур tuple часто лучше обычного массива

🔗 Связано

Обратные ссылки