0Pricing
TypeScript Academy · Урок

Остаточные элементы кортежей

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

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

Кортежи переменной длины

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

Остаточный элемент в конце

Запись [string, ...number[]] означает: одна строка, а затем ноль или более чисел. Первая позиция фиксирована, а оставшаяся часть может свободно расширяться.

type Row = [string, ...number[]]
const r: Row = ["scores", 9, 8, 7]
console.log(r[0], r.length) // scores 4

Фиксированная часть обязательна

Начальные фиксированные элементы должны присутствовать. Остаточная часть может быть пустой, но пропускать фиксированные позиции нельзя.

type Row = [string, ...number[]]
const min: Row = ["label"] // ok, zero numbers
// const bad: Row = [] // Error: missing string
console.log(min)

Остаточный элемент в начале

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

type Trailing = [...number[], boolean]
const t: Trailing = [1, 2, 3, true]
console.log(t[t.length - 1]) // true

Остаточный элемент в середине

Остаточный элемент может находиться в середине — между фиксированными начальными и конечными элементами. TypeScript определяет, какие позиции на каждом конце остаются фиксированными.

type Middle = [string, ...number[], boolean]
const m: Middle = ["start", 1, 2, false]
console.log(m[0], m[m.length - 1]) // start false

Только один остаточный элемент в кортеже

Кортеж может содержать не более одного остаточного элемента. Два остаточных элемента сделали бы позиции элементов неоднозначными, поэтому это запрещено.

// type Bad = [...string[], ...number[]] // Error: only one rest allowed
type Ok = [string, ...number[]]
const o: Ok = ["x", 1]
console.log(o)

Деструктуризация кортежа с остаточным элементом

Деструктуризация идеально соответствует остаточным элементам кортежа. Фиксированные привязки занимают фиксированные позиции, а остаточная привязка сохраняет переменную часть в виде типизированного массива.

type Row = [string, ...number[]]
const row: Row = ["scores", 9, 8]
const [label, ...values] = row
console.log(label, values) // scores [9, 8]

Именованные элементы кортежа

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

type Range = [start: number, end: number]
const span: Range = [0, 10]
console.log(span[0], span[1]) // 0 10

Метки остаточных элементов

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

type Args = [command: string, ...flags: string[]]
const a: Args = ["build", "--watch", "--minify"]
console.log(a[0], a.slice(1))

Кортежи с остаточными элементами как списки параметров

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

type Params = [name: string, ...scores: number[]]
function report(...args: Params): string {
  const [name, ...scores] = args
  return name + ": " + scores.join(",")
}
console.log(report("Ada", 9, 8))

Зачем нужны кортежи с остаточными элементами

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

type CSVRow = [id: number, ...fields: string[]]
const row: CSVRow = [1, "Ada", "Engineer"]
console.log(row[0], row.slice(1))

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

Проверьте, насколько хорошо Вы понимаете остаточные элементы кортежей.

Повторение

Остаточный элемент кортежа (...T[]) позволяет одной позиции вместить любое количество элементов, а фиксированные начальные и конечные элементы остаются обязательными. Остаточный элемент может находиться в конце, в начале или в середине, но в каждом кортеже разрешён только один такой элемент. Деструктуризация соответствует этим структурам, метки добавляют понятные подсказки, а кортежи с остаточными элементами служат основой для типизации функций с переменным числом аргументов.

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

Урок «Остаточные элементы кортежей» бесплатный?

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

Чему я научусь в уроке «Остаточные элементы кортежей»?

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

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

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

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

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

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

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

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

  1. Остаточные параметры функций
  2. Оператор spread в массивах и объектах
  3. Остаточные элементы кортежей
  4. Типизация функций с переменным числом аргументов
← Назад к TypeScript Academy