0Pricing
TypeScript Academy · Lección

Tipos en la desestructuración de objetos

Asigne tipos a propiedades de objetos desestructurados sin confundir la sintaxis de renombrado.

Tipos en la desestructuración de objetos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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.

La desestructuración y los tipos

La desestructuración de objetos extrae propiedades de un objeto y las asigna a variables locales. Con TypeScript, puede anotar la forma desestructurada, pero la sintaxis tiene una conocida trampa. Veamos cómo hacerlo correctamente.

Desestructuración básica de objetos

La desestructuración sencilla extrae las propiedades por nombre. TypeScript infiere el tipo de cada variable a partir del objeto de origen.

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

Anotación del patrón completo

Para anotar las variables desestructuradas, coloque el tipo después del patrón completo, describiendo la forma del objeto, no después de cada variable.

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

Desestructuración de parámetros de función

Este es un patrón muy habitual: desestructure un objeto de parámetros directamente en la signatura y anote su forma. Dentro del cuerpo, name e id son variables locales tipadas.

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

La trampa de la confusión con los dos puntos

En la desestructuración, los dos puntos indican un renombrado, no una anotación. Escribir { name: string } crea una variable llamada string que contiene el valor de name, algo que casi nunca es lo que desea.

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

Renombrar y anotar a la vez

Si necesita hacer ambas cosas, renombrar y especificar el tipo, renombre con dos puntos y, después, anote el patrón completo. La anotación de la forma sigue utilizando los nombres de propiedad originales.

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

Usar un tipo con nombre

Para cualquier forma que no sea trivial, prefiera una interfaz con nombre en lugar de una forma inline. Se lee mejor y puede reutilizarse.

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

Desestructurar solo algunas propiedades

No tiene que extraer todos los campos. Elija los que necesite; el tipo del resto del objeto se ignora para las variables locales que cree.

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" }))

Desestructurar valores devueltos

Cuando una función devuelve un objeto, puede desestructurar el resultado inmediatamente. Los tipos se transmiten del tipo devuelto a las variables locales.

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

Recopilar el resto

Un patrón rest reúne las propiedades restantes en un objeto nuevo. TypeScript le asigna el tipo del origen menos las claves extraídas.

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)

Resumen: inline frente a con nombre

Las formas inline son adecuadas para patrones pequeños y puntuales. Recurra a un tipo con nombre en cuanto la forma crezca o se repita. Y recuerde: los dos puntos renombran; la anotación va después de la llave de cierre.

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

Comprobación rápida

Compruebe su comprensión de la desestructuración tipada de objetos.

Resumen

Las anotaciones de tipo en una desestructuración van después del patrón completo y describen la forma del objeto. Los dos puntos dentro del patrón renombran una vinculación, no le asignan un tipo. Desestructure los parámetros y valores devueltos de las funciones con anotaciones de forma o tipos con nombre, extraiga solo los campos que necesite y use un patrón rest para recopilar el resto.

Preguntas frecuentes

¿La lección «Tipos en la desestructuración de objetos» es gratis?

Sí — el texto completo de «Tipos en la desestructuración de objetos» 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 «Tipos en la desestructuración de objetos»?

Asigne tipos a propiedades de objetos desestructurados sin confundir la sintaxis de renombrado. 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 1 de 4.

¿Cuánto tiempo toma la lección «Tipos en la desestructuración de objetos»?

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