Operador ?. en TypeScript: cómo funciona y cómo se llama realmente

Introducción: la pregunta que atormenta a los principiantes

¿Alguna vez has escrito en TypeScript y has recibido un error como Cannot read property 'name' of undefined? Un dolor familiar, ¿verdad? Especialmente cuando trabajas con datos que llegan del servidor o con objetos profundamente anidados. Es en esos momentos cuando surge la pregunta: «¿Existe en TypeScript un operador que permita acceder de forma segura a las propiedades, sin miedo a que todo se caiga?»

En Stack Overflow, esta pregunta ha acumulado miles de visitas. Y la respuesta es sí, ese operador existe. Es más, también existe en JavaScript (desde ES2020), y en TypeScript funciona «de fábrica». Se llama optional chaining (encadenamiento opcional), y tiene el aspecto familiar de ?.. En este artículo no solo te contaremos cómo usarlo, sino que también exploraremos su funcionamiento interno: cómo el compilador de TypeScript transforma esta elegante sintaxis en código JavaScript seguro.

¿Cómo se llama el operador ?. en TypeScript?

Empecemos por lo principal. En la comunidad de desarrolladores, este operador se conoce de diferentes maneras:

\n
• Optional chaining (encadenamiento opcional) — nombre oficial en la especificación de ECMAScript.
\n
• Operador de acceso seguro (Safe navigation operator) — proviene de otros lenguajes, como C# y Swift.
\n
• Operador null-conditional — aparece en la documentación de Microsoft.
\n

Pero la esencia es la misma: ?. permite acceder a una propiedad de un objeto, y si el objeto es null o undefined, en lugar de un error simplemente obtenemos undefined. Esto no es magia, sino simplemente azúcar sintáctico que hace que el código sea más limpio y seguro.

Sintaxis básica

La sintaxis es extremadamente simple. En lugar de escribir:

if (user && user.profile && user.profile.name) {\n    console.log(user.profile.name);\n}

Escribes:

console.log(user?.profile?.name);

Si user es undefined, toda la cadena se interrumpe y se muestra undefined en la consola. Sin errores, sin comprobaciones adicionales. ¡Hermoso!

Cómo funciona internamente: compilación de TypeScript a JavaScript

TypeScript es un superconjunto de JavaScript. No ejecuta el código directamente, sino que lo compila a JS normal. Por lo tanto, veamos en qué se convierte nuestro elegante user?.profile?.name después de la compilación.

Ejemplo: optional chaining simple

Código fuente en TypeScript:

const name = user?.profile?.name;

Después de la compilación (con destino ES5):

var name = user === null || user === void 0 ? void 0 : user.profile === null || user.profile === void 0 ? void 0 : user.profile.name;

¿Qué sucede aquí? El compilador genera un operador ternario que verifica cada nivel de anidamiento contra null o undefined. Si el valor es null o undefined, devuelve void 0 (que es simplemente una forma confiable de obtener undefined en motores antiguos). Si no, continúa. Básicamente, es ese mismo código «manual» que solíamos escribir, pero ahora lo genera la máquina.

Ejemplo: optional chaining con llamada a función

El operador ?. no solo funciona con propiedades, sino también con llamadas a funciones. Supongamos que tenemos un método getAddress que podría no existir:

const address = user?.getAddress?.();

Después de la compilación:

var address = user === null || user === void 0 ? void 0 : (typeof user.getAddress === "function" ? user.getAddress() : void 0);

Observa: el compilador no solo verifica null, sino que también se asegura de que getAddress sea una función antes de llamarla. Si no es una función, devuelve undef