0Pricing
TypeScript Academy · Урок

Значения по умолчанию при деструктурировании

Безопасно сочетайте значения по умолчанию с аннотациями типов

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

Заполнение пропусков

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

Значение по умолчанию при деструктуризации объекта

Укажите = value после привязки, чтобы задать запасное значение. Если свойство отсутствует или равно undefined, вместо него используется значение по умолчанию.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Значения по умолчанию и необязательные свойства

Значения по умолчанию естественно сочетаются с необязательными свойствами (?). Значение по умолчанию устраняет вариант undefined, поэтому результирующая переменная имеет необязательный тип.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Вывод типов со значениями по умолчанию

Если аннотация не указана, TypeScript выводит тип переменной из значения по умолчанию. Здесь 0 делает count типом number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Значение по умолчанию срабатывает только для undefined

Важная деталь: значения по умолчанию применяются только для undefined, но не для других ложных значений, таких как 0, "" или null. Они передаются без изменений.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Значения по умолчанию в параметрах функций

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

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Значение по умолчанию для всего параметра

Чтобы вызывающая сторона могла полностью опустить объект аргументов, задайте самому параметру значение по умолчанию {}. Без этого вызов без аргумента приведёт к ошибке.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Значения по умолчанию с переименованием

Переименование и значение по умолчанию можно указать в одной привязке: сначала переименуйте, а затем добавьте значение по умолчанию после нового имени.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Вычисляемые значения по умолчанию

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

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Итоги о значениях по умолчанию в массивах

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

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Когда значения по умолчанию особенно полезны

Значения по умолчанию идеально подходят для объектов параметров: вызывающая сторона указывает только нужные параметры, а функция подставляет разумные запасные значения. Кроме того, они удаляют undefined из выведенных типов, упрощая тело функции.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

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

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

Итоги

Значения по умолчанию при деструктуризации (= fallback) применяются только тогда, когда значение отсутствует или равно undefined, но никогда — для других ложных значений. Они удаляют undefined из типов необязательных свойств, могут быть выведены автоматически или заданы аннотацией, поддерживают переименование и могут ссылаться на предыдущие привязки. Для объектов параметров задавайте параметру значение по умолчанию {}, чтобы вызывающая сторона могла полностью его опустить.

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

Урок «Значения по умолчанию при деструктурировании» бесплатный?

Да — полный текст урока «Значения по умолчанию при деструктурировании» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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. Деструктурирование массивов и кортежей
  3. Значения по умолчанию при деструктурировании
  4. Вложенные шаблоны деструктурирования
← Назад к TypeScript Academy