Operador de Coalición Nula en TypeScript

En este artículo, explicaremos el Operador de Coalición Nula en TypeScript.

YouTube Video

Operador de Coalición Nula en TypeScript

El operador de coalición nula (??) en TypeScript es similar a la evaluación de cortocircuito en JavaScript, pero se usa más específicamente para proporcionar un valor de respaldo solo cuando el lado izquierdo es null o undefined. Este operador te permite verificar fácilmente si un valor es null o undefined y establecer un valor por defecto según sea necesario.

El operador de coalición nula (??) devuelve el valor del lado derecho solo si el lado izquierdo es null o undefined. Esto significa que valores como false, una cadena vacía o el número 0 permanecen sin cambios. Esta es una diferencia importante del operador OR lógico tradicional (||). Este operador fue introducido en TypeScript 3.7.

Sintaxis Básica

1let result = value ?? defaultValue;

• value: El sujeto a verificar si es nulo o indefinido
• defaultValue: El valor retornado si value es null o undefined

Uso de Ejemplo

1function getUserName(userName: string | null | undefined): string {
2  return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

Aquí, la función getUserName devuelve "Default User" si userName es null o undefined, de lo contrario devuelve el valor de userName.

Diferencia con el operador OR lógico

El operador OR lógico trata valores como false, 0, y "" (cadena vacía) como "falsos", igual que null y undefined. Por otro lado, el operador de coalición nula solo utiliza null y undefined como respaldo.

Ejemplo del operador OR lógico

1function getUserAge(age: number | null | undefined): number {
2  return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

Ejemplo del operador de fusión nula

1function getUserAge(age: number | null | undefined): number {
2  return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

Elegir entre el operador OR lógico y el operador de fusión nula depende de si 0 y las cadenas vacías son aceptables. Por ejemplo, si desea mantener la edad de un usuario como 0, debe usar el operador de fusión nula.

Combinación con Tipos

Puedes mejorar la robustez de tu código aprovechando la seguridad de tipos de TypeScript en combinación con el operador de coalición nula. En el siguiente ejemplo, se utilizan valores por defecto cuando ciertas propiedades son null o undefined.

 1interface User {
 2  name: string;
 3  age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7  const userName: string = user.name ?? "Anonymous";
 8  const userAge: number = user.age ?? 18;
 9  return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• En la interfaz User, age es number | null, lo que permite null o undefined como su valor.
• La función displayUserInfo devuelve "Anonymous" si name es null o undefined, y 18 si age es null o undefined.

Resumen

El operador de fusión nula ayuda a establecer un valor predeterminado solo cuando el valor es null o undefined. A diferencia del operador OR lógico tradicional, no trata false, 0 o cadenas vacías como "falsos", lo que lo hace especialmente útil para preservar estos valores. Además, combinarlo con el sistema de tipos de TypeScript permite crear un código más sólido y legible.

Al usar eficazmente el operador de fusión nula, puedes escribir de manera concisa la lógica para establecer valores predeterminados mientras reduces verificaciones innecesarias de null.

Operador de Asignación de Fusión Nula en TypeScript

El operador de asignación de fusión nula (??=) es un operador relativamente nuevo introducido en TypeScript, que ofrece un método conveniente para asignar un valor solo si la variable es null o undefined. Aquí explicaremos cómo funciona este operador, en qué situaciones es efectivo y proporcionaremos ejemplos con código.

¿Qué es el Operador de Asignación de Fusión Nula?

El operador de asignación por fusión nula es un operador de asignación basado en el operador de fusión nula. Este operador se utiliza para asignar un nuevo valor solo si la variable es null o undefined.

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"

Al usar este operador, puedes escribir de manera más concisa la lógica de "asignar si la variable es undefined o null".

Comparación con Métodos Tradicionales de Asignación

Sin el operador de asignación por fusión nula, necesitaría usar una declaración if o un operador ternario para lograr el mismo comportamiento. Comparemos con los métodos tradicionales de asignación.

Método convencional

1let variable: string | null = null;
2if (variable === null || variable === undefined) {
3  variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

Método utilizando el operador ternario

1let variable: string | null = null;
2variable = variable ?? "Default Value";
3console.log(variable); // Output: "Default Value"

Método conciso utilizando el operador ??=

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

El operador de asignación por fusión nula es mucho más simple y legible en comparación con otros métodos de asignación, mejorando la legibilidad del código.

Ejemplos Específicos de Uso de ??=

El operador de asignación por fusión nula es útil en varios escenarios, como la inicialización de propiedades de objetos y la configuración de valores predeterminados. Aquí hay algunos ejemplos específicos.

Inicialización de propiedades del objeto

 1interface Config {
 2  theme?: string;
 3  language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

Inicialización de matrices

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

Definición de valores predeterminados para los argumentos de función

1function greet(name?: string) {
2  name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3  console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

Notas y Restricciones

El operador de asignación por fusión nula es muy útil, pero hay algunas advertencias.

• Solo apunta a null y undefined: Este operador asigna solo si el valor es null o undefined. Por ejemplo, las cadenas vacías (""), 0 y false no son apuntadas.

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• Combinación con otros operadores: Usar el operador de asignación por fusión nula con otros operadores puede generar resultados no deseados. Es especialmente importante entender la diferencia entre este y el operador de asignación OR lógico.

 1let value: string | null = null;
 2value ||= "Default";  // Targets not only "null" and "undefined" but also falsy values
 3console.log(value);  // Output: "Default"
 4
 5value = "";
 6value ||= "Default";  // An empty string is also targeted
 7console.log(value);  // Output: "Default"
 8
 9value = null;
10value ??= "Default";  // Targets only null or undefined
11console.log(value);  // Output: "Default"

Código de Ejemplo

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

Al usar el operador de asignación por fusión nula, puede eliminar código innecesario y escribir código TypeScript más fluido y elegante.

Resumen

El operador de asignación nullish coalescing (??=) es una de las operaciones de asignación más simples y eficientes en TypeScript. Es particularmente útil cuando necesitas realizar comprobaciones de null o undefined mientras configuras valores predeterminados. En comparación con las declaraciones if tradicionales o los operadores ternarios, hace que el código sea más conciso y legible, y debe ser utilizado de manera activa en el desarrollo futuro.

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