0Pricing
TypeScript Academy · Урок

Типы деструктурирования объектов

Задавайте типы деструктурированных свойств объектов, не путая их с синтаксисом переименования

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

Деструктуризация и типы

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

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

Обычная деструктуризация извлекает свойства по именам. TypeScript выводит тип каждой переменной из исходного объекта.

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

Аннотация всего шаблона

Чтобы аннотировать деструктурированные переменные, укажите тип после всего шаблона, описывая форму объекта, а не после каждой переменной.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Деструктуризация параметров функции

Очень распространённый шаблон: деструктурируйте объект параметров непосредственно в сигнатуре и аннотируйте его форму. Внутри тела name и id являются типизированными локальными переменными.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Ловушка с двоеточием в деструктуризации

В деструктуризации двоеточие означает переименование, а не аннотацию. Запись { name: string } создаёт переменную с именем string, содержащую значение name, — почти никогда не то, что вам нужно.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Переименование и аннотация вместе

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

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Использование именованного типа

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

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

Деструктуризация только некоторых свойств

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

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

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

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

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Сбор остальных свойств

Шаблон для остальных свойств собирает оставшиеся свойства в новый объект. TypeScript выводит его тип как исходный тип без извлечённых ключей.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Итоги: встроенная и именованная структура

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

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

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

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

Итоги

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

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

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

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

Чему я научусь в уроке «Типы деструктурирования объектов»?

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

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

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

Сколько времени занимает урок «Типы деструктурирования объектов»?

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

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

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

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

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