0Pricing
TypeScript Academy · Lección

Encadenamiento opcional con ?.

Acceda de forma segura a propiedades profundamente anidadas que pueden ser null.

Encadenamiento opcional con ?. 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.

El operador de encadenamiento opcional

El encadenamiento opcional (?.) permite acceder de forma segura a una propiedad que podría pertenecer a un valor null o undefined. Si el valor es nulo o indefinido, toda la expresión se corta y devuelve undefined en lugar de lanzar una excepción.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Cortocircuito ante valores nulos o indefinidos

Cuando el operando anterior a ?. es null o undefined, la evaluación se detiene de inmediato y devuelve undefined. El resto de la cadena nunca se ejecuta.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Encadenamiento de varios niveles

Puede colocar ?. en cada paso incierto de un acceso profundo. Cualquier enlace nulo o indefinido corta toda la cadena y le protege de los errores «cannot read property of undefined».

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

El tipo del resultado incluye undefined

Como la cadena puede producir undefined, TypeScript añade undefined al tipo del resultado. Si el tipo de la propiedad era string, el resultado encadenado es string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Gestión del resultado undefined

Como el resultado puede ser undefined, normalmente debe comprobarlo o proporcionar un valor alternativo. El sistema de tipos le recuerda que debe gestionar el caso de ausencia.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Comparación con cadenas de &&

Antes de ?., los desarrolladores escribían cadenas largas de &&: a && a.b && a.b.c. El encadenamiento opcional expresa la misma intención de forma mucho más concisa y se lee de principio a fin.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Por qué ?. es mejor que &&

El enfoque con && trata cualquier valor falsy (0, '', false) como un punto de detención, lo que puede ser un error. El encadenamiento opcional se detiene solo ante null o undefined, que normalmente es lo que necesita.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Encadenamiento opcional en arrays de objetos

El encadenamiento opcional funciona con cualquier acceso a propiedades. Combinado con el acceso a elementos, permite acceder de forma segura a arrays anidados de objetos.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

El cortocircuito detiene toda la expresión

Una vez que una cadena se corta, incluso los accesos a propiedades escritos después de ella (sin ?.) se omiten. Toda la expresión se evalúa inmediatamente como undefined.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Encadenamiento opcional con retornos de funciones

Puede encadenar el resultado de una llamada a una función. Si la función devuelve un valor nulo o indefinido, el acceso siguiente se corta de forma segura.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Un ejemplo práctico de configuración

El encadenamiento opcional resulta especialmente útil al leer configuraciones parciales o respuestas de API cuyos campos anidados pueden faltar. Mantiene el acceso legible y evita errores.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Comprobación rápida

Compruebe su comprensión del encadenamiento opcional.

Repaso: encadenamiento opcional

Ha aprendido que ?.:

  • Accede de forma segura a propiedades de valores que podrían ser null o undefined.
  • Corta toda la expresión y devuelve undefined cuando encuentra un enlace nulo o indefinido.
  • Añade undefined al tipo del resultado.
  • Mejora las cadenas de && porque se detiene solo ante valores nulos o indefinidos, no ante todos los valores falsy.

A continuación, el operador de coalescencia nula.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Preguntas frecuentes

¿La lección «Encadenamiento opcional con ?.» es gratis?

Sí — el texto completo de «Encadenamiento opcional con ?.» 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 «Encadenamiento opcional con ?.»?

Acceda de forma segura a propiedades profundamente anidadas que pueden ser null. 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 «Encadenamiento opcional con ?.»?

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