0Pricing
TypeScript Academy · Lección

Valores predeterminados en la desestructuración

Combine valores predeterminados con anotaciones de tipo de forma segura.

Valores predeterminados en la desestructuración es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 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.

Completar los valores faltantes

Los valores predeterminados de la desestructuración proporcionan una alternativa cuando falta una propiedad o un elemento, o es undefined. Combinados con la inferencia de TypeScript, hacen que la configuración opcional sea práctica y segura.

Un valor predeterminado en la desestructuración de objetos

Escriba = value después de una vinculación para proporcionarle una alternativa. Si la propiedad no existe o es undefined, se utiliza el valor predeterminado.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Valores predeterminados con propiedades opcionales

Los valores predeterminados combinan de forma natural con las propiedades opcionales (?). El valor predeterminado elimina el caso undefined, por lo que la variable resultante tiene un tipo no opcional.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Valores predeterminados y tipos inferidos

Si no anota la variable, TypeScript infiere su tipo a partir del valor predeterminado. Aquí, 0 hace que count sea de tipo number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Solo undefined activa el valor predeterminado

Un detalle sutil: los valores predeterminados se aplican únicamente a undefined, nunca a otros valores falsy como 0, "" o null. Esos valores pasan sin cambios.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Valores predeterminados en parámetros de funciones

Los valores predeterminados en parámetros desestructurados facilitan el uso de opciones opcionales. Cada campo puede tener su propia alternativa directamente en la firma.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Establecer un valor predeterminado para todo el parámetro

Para permitir que quien llame omita por completo el objeto de argumentos, asigne al parámetro un valor predeterminado de {}. Sin esto, llamar a la función sin argumentos produciría un error.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Valores predeterminados con renombrado

Puede renombrar y asignar un valor predeterminado en una sola vinculación: renombre primero y añada después el valor predeterminado tras el nuevo nombre.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Valores predeterminados calculados

Un valor predeterminado puede ser cualquier expresión, incluso una que haga referencia a vinculaciones anteriores. Se evalúa de forma diferida, solo cuando el valor realmente falta.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Resumen de los valores predeterminados en arrays

Los valores predeterminados también funcionan en la desestructuración de arrays y se aplican a cada posición cuando falta un elemento o es undefined.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Cuándo resultan útiles los valores predeterminados

Los valores predeterminados son ideales para los objetos de opciones: quien llame especifica únicamente lo que necesita y la función completa el resto con alternativas razonables. También eliminan undefined de los tipos inferidos, lo que simplifica el cuerpo de la función.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Comprobación rápida

Compruebe su comprensión de los valores predeterminados en la desestructuración.

Resumen

Los valores predeterminados de la desestructuración (= fallback) se aplican únicamente cuando falta un valor o es undefined, nunca con otros valores falsy. Eliminan undefined de los tipos de propiedades opcionales, pueden inferirse o anotarse, admiten el renombrado y pueden hacer referencia a vinculaciones anteriores. En los objetos de opciones, establezca el parámetro en {} de forma predeterminada para que quien llame pueda omitirlo por completo.

Preguntas frecuentes

¿La lección «Valores predeterminados en la desestructuración» es gratis?

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

Combine valores predeterminados con anotaciones de tipo de forma segura. 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 3 de 4.

¿Cuánto tiempo toma la lección «Valores predeterminados en la desestructuración»?

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