Encadenamiento opcional en TypeScript

En este artículo, explicamos el encadenamiento opcional en TypeScript.

YouTube Video

Encadenamiento opcional en TypeScript

El encadenamiento opcional en TypeScript es una característica útil para acceder a las propiedades de objetos o arreglos profundamente anidados. Esta característica evita errores al acceder a propiedades inexistentes, permitiéndote escribir código conciso y legible.

¿Qué es el Encadenamiento Opcional?

El operador de encadenamiento opcional (?.) devuelve undefined al acceder a una propiedad o método de un objeto que no existe. Esto permite que el código continúe ejecutándose sin lanzar un error si la propiedad no existe.

Por ejemplo, al acceder a las propiedades de un objeto anidado como se muestra a continuación, ocurre un error si la propiedad no existe utilizando el método usual.

Ejemplo

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• En este caso, se producirá un error si address no existe. Se puede usar el encadenamiento opcional para prevenir esto.

Ejemplo usando encadenamiento opcional

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• Usar el encadenamiento opcional evita errores y devuelve undefined en su lugar cuando las propiedades no existen.

Cómo Usar el Encadenamiento Opcional

El encadenamiento opcional se puede usar en varios escenarios, como el acceso a propiedades, llamadas a funciones y acceso a arreglos. Explicaremos cómo usar cada uno de estos.

Acceso a Propiedades

Puedes acceder de forma segura a las propiedades anidadas de los objetos.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Este código utiliza el encadenamiento opcional para acceder a las propiedades city y country solo si la propiedad location existe en el objeto company.

Llamadas a Funciones

El encadenamiento opcional también puede verificar la existencia de una función antes de llamarla.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

Este código utiliza el encadenamiento opcional para invocar de forma segura la función greet solo si existe. No ocurre ningún error incluso si la función no está definida.

Acceso a Arreglos

El encadenamiento opcional se puede aplicar a arreglos para verificar si existen elementos.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Este código accede a los elementos del arreglo solo si team.members existe, devolviendo el valor para los índices existentes y undefined para los que no existen.

Encadenamiento Opcional y el Operador de Fusión Nula

El encadenamiento opcional devuelve undefined, pero a veces esto no es suficiente. En este caso, el operador de fusión nula (??), introducido en TypeScript 3.7, puede usarse para proporcionar valores predeterminados para null o undefined.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

Cuando se combina con el encadenamiento opcional, puedes escribir código aún más flexible.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Precauciones al Usar el Encadenamiento Opcional

Al utilizar el encadenamiento opcional, es importante tener en cuenta los siguientes puntos:.

• Uso innecesario del encadenamiento opcional

  • Utilizar el encadenamiento opcional en propiedades o métodos que están garantizados puede hacer que tu código sea innecesariamente verboso. Es mejor usarlo solo cuando la existencia del objetivo al que se accede es incierta.

• Errores tipográficos

  • El uso excesivo del encadenamiento opcional puede dificultar la detección de errores tipográficos que resultan en el acceso a propiedades no deseadas. Realiza verificaciones de tipos adecuadas y úsalo con precaución.

Resumen del código

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Resumen

El encadenamiento opcional en TypeScript proporciona código conciso mientras evita errores al acceder a objetos o arreglos profundamente anidados. Además, combinarlo con el operador de fusión nula permite establecer valores predeterminados y crear una lógica más flexible. Cuando se usa adecuadamente, puede mejorar significativamente la seguridad y la legibilidad del código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video