0Pricing
TypeScript Academy · Lección

Combinación de ?. y ??

Combine el encadenamiento opcional con valores predeterminados adecuados.

Combinación de ?. y ?? 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.

Una combinación perfecta

El encadenamiento opcional y la coalescencia nula están diseñados para trabajar juntos. El patrón obj?.value ?? fallback lee de forma segura un valor anidado y proporciona un valor predeterminado si falta. Es uno de los modismos más útiles de TypeScript moderno.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Cómo funciona el patrón

Primero, ?. evalúa la cadena y produce el valor o undefined. Después, ?? comprueba ese resultado: si es nulo o undefined, se utiliza el valor alternativo. Dos operadores en una sola expresión clara.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

El tipo del resultado

La cadena produce T | undefined; ?? elimina undefined y combina en una unión el tipo del valor alternativo. Con un valor alternativo compatible, el tipo final es simplemente T: ya no queda ningún undefined que gestionar.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Conservar valores falsy válidos

Como ?? solo se activa con valores nulos o undefined, se conserva un 0 legítimo obtenido mediante la cadena. El valor alternativo solo se aplica cuando la propiedad realmente falta.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Acceder a configuraciones anidadas

Para configuraciones profundamente anidadas, encadene varios pasos ?. y termine con un solo ??. Si falta cualquier elemento de la cadena, se utiliza correctamente el valor predeterminado.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Valores predeterminados para respuestas de API

Las respuestas de API suelen omitir campos opcionales. El patrón combinado los lee de forma preventiva y sustituye valores predeterminados razonables, manteniendo sencillo el código posterior y evitando errores en tiempo de ejecución.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Combinar con resultados de métodos

Puede encadenar llamadas a funciones o métodos y establecer valores predeterminados para sus resultados. Si la llamada devuelve un valor nulo o undefined, se utiliza el valor alternativo.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Evitar comprobaciones extensas

Antes de estos operadores, tendría que escribir comprobaciones de valores nulos en varias líneas. El modismo combinado sustituye todo un bloque por una sola expresión, lo que mejora la legibilidad sin perder seguridad.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Recurrir a otra búsqueda

El valor alternativo después de ?? puede ser otra búsqueda encadenada, lo que le permite probar una fuente secundaria antes de usar un valor literal predeterminado final.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Combinar con el acceso a elementos

El patrón también funciona con el acceso a elementos de un array: lea un elemento mediante ?.[i] y proporciónele un valor predeterminado con ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Un lector de configuración del mundo real

Al combinarlo todo, obtenemos un lector de configuración que desciende de forma segura por capas opcionales y garantiza un valor utilizable. Este es el TypeScript de producción que escribirá a menudo.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Comprobación rápida

Compruebe cuánto entiende sobre la combinación de ?. y ??.

Repaso: combinación de ?. y ??

Ha aprendido el modismo obj?.value ?? fallback:

  • ?. desciende de forma segura y produce el valor o undefined.
  • ?? proporciona un valor predeterminado solo cuando el resultado es nulo o undefined.
  • El tipo final elimina undefined y a menudo se convierte en un T limpio.
  • Se conservan los valores falsy válidos, como 0.

A continuación, llamadas opcionales y acceso opcional a elementos.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Preguntas frecuentes

¿La lección «Combinación de ?. y ??» es gratis?

Sí — el texto completo de «Combinación de ?. y ??» 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 «Combinación de ?. y ??»?

Combine el encadenamiento opcional con valores predeterminados adecuados. 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 «Combinación de ?. y ??»?

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. Encadenamiento opcional con ?.
  2. Coalescencia nula con ??
  3. Combinación de ?. y ??
  4. Llamadas y acceso a elementos opcionales
← Volver a TypeScript Academy