0Pricing
TypeScript Academy · Урок

Деструктурирование массивов и кортежей

Деструктурируйте массивы и кортежи с правильными типами элементов

«Деструктурирование массивов и кортежей» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Позиционная деструктуризация

Деструктуризация массивов связывает переменные по позиции, а не по имени. В кортежах каждой позиции соответствует определённый тип, что обеспечивает точное извлечение в заданном порядке.

Базовая деструктуризация массива

Квадратные скобки слева извлекают элементы по порядку индексов. Для обычного массива всем привязкам соответствует тип его элементов.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Аннотация шаблона кортежа

Чтобы добавить аннотацию, укажите тип кортежа после шаблона привязки. Для каждой позиции задаётся собственный тип — здесь сначала число, затем строка.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Типы следуют позициям

В кортеже тип каждой позиции фиксирован. Первая привязка имеет тип числа, вторая — тип строки; если поменять значения местами, возникнет ошибка типов.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Пропуск элементов с помощью запятых

Оставьте пустой слот между запятыми, чтобы пропустить ненужную позицию. Тип пропущенного элемента просто не учитывается.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Деструктуризация с остатком

Остаточный элемент собирает остальные значения в массив. Для кортежа его тип отражает оставшиеся позиции.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Тип остатка из кортежа

При деструктуризации кортежа с остаточным элементом TypeScript выводит для остаточной переменной тип кортежа из оставшихся элементов, сохраняя их типы.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Обмен переменными

Вот полезный приём, который позволяет деструктуризация массивов: обменять два значения без временной переменной. Для успешной проверки типов значения должны быть совместимы.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Деструктуризация возвращаемых значений функций

Функции, возвращающие кортежи, отлично сочетаются с деструктуризацией — именно так устроен шаблон useState в React.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Значения по умолчанию в шаблонах массивов

Задайте значение по умолчанию для позиции, которая может содержать undefined. Значение по умолчанию используется только тогда, когда элемент отсутствует или равен undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Вложенная деструктуризация массивов

Можно деструктурировать массивы внутри массивов в одном операторе. Типы вкладываются соответствующим образом, но для глубоких структур не забывайте о читаемости.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Быстрая проверка

Проверьте, насколько хорошо Вы поняли деструктуризацию массивов и кортежей.

Итоги

Деструктуризация массивов связывает значения по позициям; аннотируйте её типом кортежа после шаблона, чтобы каждому индексу соответствовал собственный тип. Пропускайте элементы с помощью пустых слотов между запятыми, собирайте остаток остаточным элементом, который остаётся кортежем из оставшихся позиций, и задавайте значения по умолчанию для потенциально отсутствующих позиций. Возврат кортежей в сочетании с деструктуризацией обеспечивает такие мощные шаблоны, как useState.

Часто задаваемые вопросы

Урок «Деструктурирование массивов и кортежей» бесплатный?

Да — полный текст урока «Деструктурирование массивов и кортежей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Деструктурирование массивов и кортежей»?

Деструктурируйте массивы и кортежи с правильными типами элементов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Деструктурирование массивов и кортежей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типы деструктурирования объектов
  2. Деструктурирование массивов и кортежей
  3. Значения по умолчанию при деструктурировании
  4. Вложенные шаблоны деструктурирования
← Назад к TypeScript Academy