Respuesta.

El mecanismo de optional chaining (?.) apareció en JavaScript para un acceso seguro y conveniente a propiedades y métodos de objetos que pueden no estar necesariamente definidos. En TypeScript se ha vuelto especialmente útil, ya que ayuda a evitar errores en tiempo de ejecución relacionados con el acceso a propiedades o métodos de undefined o null.

Historia del tema

Antes de la aparición del optional chaining, los desarrolladores tenían que comprobar manualmente la existencia de cada nivel de anidamiento del objeto, lo que hacía que el código fuera extenso y difícil de leer:

if (obj && obj.a && obj.a.b) {
  // ...
}

Problema

Al acceder a propiedades anidadas de un objeto indefinido, se puede generar un error en tiempo de ejecución: Cannot read property 'x' of undefined. Además, las largas cadenas de comprobaciones dificultan el mantenimiento y la comprensión del código.

Solución

El optional chaining (?.) permite acceder a propiedades anidadas, métodos o elementos de un array, devolviendo automáticamente undefined si alguna parte de la cadena es null o undefined.

Ejemplo de código:

interface User {
  name: string;
  address?: {
    city?: string;
  };
}

const user: User = { name: 'Ivan' };
console.log(user.address?.city); // undefined

Características clave:

Permite escribir código compacto, seguro y fácil de entender.
Funciona con el acceso a propiedades, métodos e índices de arrays.
El tipo de valor devuelto es T | undefined, lo que es tenido en cuenta por el compilador de TypeScript y ayuda a evitar errores.

Preguntas con trampa.

¿Se puede usar el optional chaining a la izquierda del operador de asignación? Por ejemplo: user.address?.city = 'Moscow'?

No, el optional chaining no se puede usar en la expresión izquierda de una asignación, esto generará un error de compilación. El optional chaining solo funciona al leer, no al escribir.

¿Se puede usar el optional chaining para llamar a un método si el objeto mismo puede no estar definido? Por ejemplo: user?.logInfo()?

Sí, si el objeto hasta el punto de llamar al método puede ser undefined/null, entonces la llamada user?.logInfo() no generará un error y simplemente retornará undefined si el user no está definido.

user?.logInfo(); // si user está definido, se llamará a logInfo, de lo contrario no ocurrirá nada

¿Cuál es la diferencia entre optional chaining y el operador '&&' en el estilo antiguo, por ejemplo: user && user.address && user.address.city?

El optional chaining es más corto, funciona para todos los tipos (incluidos métodos y arrays), y TypeScript lo tiene en cuenta en la verificación de tipos. Es importante que al usar el operador '&&' puedes accidentalmente obtener no true/false o undefined, sino un valor anidado. El optional chaining garantiza que siempre obtendrás ya sea el tipo esperado o undefined, lo que es tenido en cuenta en la inferencia de tipos.

Errores comunes y anti-patrones

Esperar que el optional chaining "cree" objetos anidados al asignar — esto no es cierto.
Usar optional chaining al acceder a variables que por tipo nunca pueden ser undefined/null (código innecesario y inútil).
La costumbre de aplicar optional chaining sin pensar en todas partes, lo cual dificulta el mantenimiento del código.

Ejemplo de la vida real

Caso negativo

El código utiliza largas cadenas de optional chaining incluso donde las variables por lógica de negocio siempre están definidas:

order?.customer?.address?.city = 'London';

Ventajas:

Protege contra posibles errores si las propiedades no están definidas.

Desventajas:

La asignación no ocurrirá si alguna de las propiedades falta, y no hay notificación o manejo de errores; se introduce lógica "oculta" y confusión en el código.

Caso positivo

Se usa optional chaining solo al trabajar con datos externos o en lugares donde los valores realmente pueden ser indefinidos:

const city = apiResponse?.info?.location?.city || 'Unknown';