0Pricing
TypeScript Academy · Lección

Patrones de desestructuración anidada

Asigne tipos a expresiones de desestructuración profundamente anidadas.

Patrones de desestructuración anidada es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Acceder a datos anidados

La desestructuración anidada extrae valores de objetos dentro de otros objetos en una sola instrucción. Es concisa, pero interactúa con los tipos de formas que conviene comprender y puede perjudicar la legibilidad si se usa en exceso.

Desestructurar una propiedad anidada

Reproduzca la forma del objeto en el lado izquierdo. Para acceder a data.user.name, anide un patrón bajo user.

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

El nombre exterior no se vincula

Una trampa sutil: en { user: { name } }, user es solo una ruta, no una vinculación. Obtiene name, pero después no existe ninguna variable llamada user.

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

Tipar la desestructuración anidada

Anote la forma anidada completa después del patrón. Cada nivel refleja la estructura del objeto.

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

Los tipos con nombre se leen mejor

Las formas anidadas inline se vuelven engorrosas rápidamente. Una interfaz con nombre mantiene limpia la anotación y permite seguir extrayendo valores anidados.

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

Extraer ambos niveles

Si también necesita el objeto exterior, extráigalo por separado y desestructure después sus miembros en otro paso. A menudo resulta más claro que anidar profundamente.

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

Combinar anidación con valores predeterminados

Los valores predeterminados pueden aparecer en cualquier nivel. Proporcione una alternativa para un campo anidado que podría faltar justo donde lo vincula.

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

Establecer valores predeterminados para subobjetos faltantes

Cuando pueda faltar un objeto anidado completo, asígnele {} como valor predeterminado antes de desestructurar sus campos; de lo contrario, acceder a una propiedad de undefined producirá un error.

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

Array anidado dentro de un objeto

Puede combinar patrones de objetos y arrays. Aquí obtenemos la primera etiqueta de un array anidado en una sola línea.

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

Equilibrio entre concisión y legibilidad

Los patrones profundamente anidados ahorran líneas, pero pueden ocultar la intención. Tres niveles de profundidad con valores predeterminados resultan difíciles de leer rápidamente. Si quien lee tiene que detenerse, divídalo en varios pasos.

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

Un ejemplo equilibrado

Un nivel de anidación con un par de campos suele ser el punto ideal: es conciso sin resultar críptico.

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

Comprobación rápida

Compruebe su comprensión de la desestructuración anidada.

Resumen

La desestructuración anidada reproduce la forma del objeto para acceder a valores internos; las claves exteriores son rutas, no vinculaciones, por lo que solo los nombres más internos se convierten en variables. Anote la forma anidada completa o use un tipo con nombre, asigne {} como valor predeterminado a los subobjetos faltantes antes de desestructurar sus campos y combine patrones de arrays cuando sea necesario. Mantenga la anidación poco profunda: divida los patrones profundos en varios pasos para mejorar la legibilidad.

Preguntas frecuentes

¿La lección «Patrones de desestructuración anidada» es gratis?

Sí — el texto completo de «Patrones de desestructuración anidada» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Patrones de desestructuración anidada»?

Asigne tipos a expresiones de desestructuración profundamente anidadas. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Patrones de desestructuración anidada»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipos en la desestructuración de objetos
  2. Desestructuración de arrays y tuplas
  3. Valores predeterminados en la desestructuración
  4. Patrones de desestructuración anidada
← Volver a TypeScript Academy