TypeScript Academy · Aula

Padrões de Desestruturação Aninhados

Defina os tipos de expressões de desestruturação profundamente aninhadas.

Padrões de Desestruturação Aninhados é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Acessando Dados Aninhados

A desestruturação aninhada extrai valores de objetos dentro de objetos em uma única instrução. Ela é concisa, mas interage com os tipos de maneiras que vale a pena entender — e pode prejudicar a legibilidade se for usada em excesso.

Desestruturar uma Propriedade Aninhada

Reproduza a estrutura do objeto no lado esquerdo. Para acessar data.user.name, aninhe um padrão sob user.

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

O Nome Externo Não É Vinculado

Uma armadilha sutil: em { user: { name } }, user é apenas um caminho, não uma vinculação. Você obtém name, mas nenhuma variável chamada user existe depois.

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

Tipar uma Desestruturação Aninhada

Anote com a estrutura aninhada completa depois do padrão. Cada nível reproduz a estrutura do objeto.

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

Tipos Nomeados Melhoram a Leitura

Estruturas aninhadas em linha ficam rapidamente difíceis de manejar. Uma interface nomeada mantém a anotação limpa e ainda permite a extração aninhada.

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

Extrair os Dois Níveis

Se também precisar do objeto externo, extraia-o separadamente e depois desestruture seus membros em outra etapa. Isso costuma ser mais claro do que um aninhamento profundo.

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

Combinar Aninhamento com Valores Padrão

Os valores padrão podem aparecer em qualquer nível. Forneça uma alternativa para um campo aninhado possivelmente ausente exatamente onde você o vincula.

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

Definir Valores Padrão para Subobjetos Ausentes

Quando um objeto aninhado inteiro pode estar ausente, defina-o como {} antes de desestruturar seus campos — caso contrário, acessar uma propriedade de undefined causará uma exceção.

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

Vetor Aninhado Dentro de um Objeto

Você pode combinar padrões de objeto e de vetor. Aqui, extraímos a primeira etiqueta de um vetor aninhado em uma única linha.

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

Compensações de Legibilidade

Padrões profundamente aninhados economizam linhas, mas podem ocultar a intenção. Três níveis de profundidade com valores padrão ficam difíceis de examinar. Se o leitor precisar parar para entender, divida o código em etapas.

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

Um Exemplo Equilibrado

Um nível de aninhamento com alguns campos costuma ser o ponto ideal — conciso sem ser enigmático.

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

Verificação rápida

Teste sua compreensão sobre a desestruturação aninhada.

Recapitulação

A desestruturação aninhada reproduz a estrutura do objeto para alcançar valores internos; as chaves externas são caminhos, não vinculações, portanto somente os nomes mais internos se tornam variáveis. Anote com a estrutura aninhada completa ou com um tipo nomeado, defina subobjetos ausentes como {} antes de desestruturar seus campos e combine padrões de vetor quando necessário. Mantenha o aninhamento superficial — divida padrões profundos em etapas para preservar a legibilidade.

Perguntas Frequentes

A aula “Padrões de Desestruturação Aninhados” é grátis?

Sim — o texto completo de “Padrões de Desestruturação Aninhados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Padrões de Desestruturação Aninhados”?

Defina os tipos de expressões de desestruturação profundamente aninhadas. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Padrões de Desestruturação Aninhados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para TypeScript Academy