0Pricing
TypeScript Academy · Урок

Вложенные шаблоны деструктурирования

Задавайте типы для глубоко вложенных выражений деструктурирования

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

Переход к вложенным данным

Вложенная деструктуризация извлекает значения из объектов внутри объектов в одном операторе. Это кратко, но взаимодействие с типами здесь требует понимания, а чрезмерное использование может ухудшить читаемость.

Деструктуризация вложенного свойства

Отразите форму объекта в левой части. Чтобы обратиться к data.user.name, вложите шаблон в user.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

Внешнее имя не связывается

Есть важная тонкость: в { user: { name } } user — это только путь, а не привязка. Вы получаете name, но переменной с именем user после этого не существует.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Типизация вложенной деструктуризации

Укажите аннотацию полной вложенной структуры после шаблона. Каждый уровень отражает структуру объекта.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Именованные типы легче читать

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

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Извлечение обоих уровней

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

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Сочетание вложенности со значениями по умолчанию

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

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Значения по умолчанию для отсутствующих вложенных объектов

Если весь вложенный объект может отсутствовать, задайте ему значение по умолчанию {} перед деструктуризацией его полей — иначе обращение к свойству undefined приведёт к ошибке.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Вложенный массив внутри объекта

Можно сочетать шаблоны объектов и массивов. Здесь мы извлекаем первый тег из вложенного массива в одной строке.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Компромисс между вложенностью и читаемостью

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

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Сбалансированный пример

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

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

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

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

Итоги

Вложенная деструктуризация повторяет структуру объекта, чтобы получить внутренние значения; внешние ключи являются путями, а не привязками, поэтому переменными становятся только самые внутренние имена. Аннотируйте полную вложенную структуру или используйте именованный тип, задавайте отсутствующим вложенным объектам значение {} перед деструктуризацией их полей и при необходимости сочетайте шаблоны массивов. Делайте вложенность неглубокой — для удобства чтения разбивайте глубокие шаблоны на несколько шагов.

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

Урок «Вложенные шаблоны деструктурирования» бесплатный?

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

Чему я научусь в уроке «Вложенные шаблоны деструктурирования»?

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

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

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

Сколько времени занимает урок «Вложенные шаблоны деструктурирования»?

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

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

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

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

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