Operador de Coalescência de Valores Nulos no TypeScript

Neste artigo, explicaremos o Operador de Coalescência de Valores Nulos no TypeScript.

YouTube Video

Operador de Coalescência de Valores Nulos no TypeScript

O operador de coalescência de valores nulos (??) no TypeScript é semelhante à avaliação de curto-circuito do JavaScript, mas é usado de forma mais explícita para fornecer um valor de fallback apenas quando o lado esquerdo é null ou undefined. Este operador permite verificar facilmente se um valor é null ou undefined e definir um valor padrão conforme necessário.

O operador de coalescência de valores nulos (??) retorna o valor do lado direito apenas se o lado esquerdo for null ou undefined. Isso significa que valores como false, uma string vazia ou o número 0 permanecem inalterados. Esta é uma diferença importante em relação ao operador lógico OU tradicional (||). Este operador foi introduzido no TypeScript 3.7.

Sintaxe Básica

1let result = value ?? defaultValue;

• value: O valor a ser verificado se é null ou undefined
• defaultValue: O valor retornado se value for null ou undefined

Exemplo de Uso

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

Aqui, a função getUserName retorna "Default User" se userName for null ou undefined, caso contrário, retorna o valor de userName.

Diferença do operador lógico OU

O operador lógico OU trata valores como false, 0 e "" (string vazia) como "falsy", assim como null e undefined. Por outro lado, o operador de coalescência de valores nulos usa apenas null e undefined como fallback.

Exemplo do operador lógico OU

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

Exemplo do operador de coalescência 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

A escolha entre o operador lógico OU e o operador de coalescência nula depende de 0 e strings vazias serem aceitáveis ou não. Por exemplo, se você quiser manter a idade de um usuário como 0, precisará usar o operador de coalescência nula.

Combinação com Tipos

Você pode aumentar a robustez do seu código aproveitando a segurança de tipos do TypeScript em combinação com o operador de coalescência de valores nulos. No exemplo a seguir, valores padrão são usados quando certas propriedades são null ou 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

• Na interface User, age é number | null, permitindo null ou undefined como valor.
• A função displayUserInfo retorna "Anonymous" se name for null ou undefined, e 18 se age for null ou undefined.

Resumo

O operador de coalescência nula ajuda a definir um valor padrão apenas quando o valor é null ou undefined. Ao contrário do operador lógico OU tradicional, ele não trata false, 0 ou strings vazias como "falsy", tornando-o especialmente útil para preservar esses valores. Além disso, combiná-lo com o sistema de tipos do TypeScript permite criar códigos mais robustos e legíveis.

Ao usar efetivamente o operador de coalescência nula, você pode escrever de forma concisa a lógica para definir valores padrão enquanto reduz verificações de null desnecessárias.

Operador de Atribuição de Coalescência Nula no TypeScript

O operador de atribuição de coalescência nula (??=) é um operador relativamente novo introduzido no TypeScript, que oferece um método prático para atribuir um valor apenas se a variável for null ou undefined. Aqui, explicaremos como esse operador funciona, em quais situações ele é eficaz e forneceremos exemplos com código.

O que é o Operador de Atribuição de Coalescência Nula

O operador de atribuição de coalescência nula é um operador de atribuição baseado no operador de coalescência nula. Este operador é usado para atribuir um novo valor apenas se a variável for null ou 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"

Ao usar este operador, você pode escrever de forma mais concisa a lógica de "atribuir se a variável for undefined ou null".

Comparação com Métodos Tradicionais de Atribuição

Sem o operador de atribuição de coalescência nula, seria necessário usar uma declaração if ou um operador ternário para alcançar o mesmo comportamento. Vamos comparar com os métodos tradicionais de atribuição.

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 usando o operador ternário

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

Método conciso usando o operador ??=

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

O operador de atribuição de coalescência nula é muito mais simples e legível em comparação com outros métodos de atribuição, melhorando a legibilidade do código.

Exemplos Específicos de Uso do ??=

O operador de atribuição de coalescência nula é útil em vários cenários, como inicializar propriedades de objetos e definir valores padrão. Aqui estão alguns exemplos específicos.

Inicialização de propriedades do 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" }

Inicialização de arrays

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

Definição de valores padrão para argumentos de funções

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!"

Observações e Restrições

O operador de atribuição de coalescência nula é muito útil, mas existem algumas advertências.

• Alvo apenas para null e undefined: Este operador atribui valor somente se o valor for null ou undefined. Por exemplo, strings vazias (""), 0 e false não são alvo.

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)

• Combinando com outros operadores: Usar o operador de atribuição de coalescência nula com outros operadores pode levar a resultados inesperados. É especialmente importante entender a diferença entre ele e o operador de atribuição lógico OU.

 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 Exemplo

 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]

Ao usar o operador de atribuição de coalescência nula, você pode eliminar códigos desnecessários e escrever um código TypeScript mais suave e elegante.

Resumo

O operador de atribuição de coalescência nula (??=) é uma das operações de atribuição simples e eficientes no TypeScript. É particularmente útil quando você precisa verificar null ou undefined ao definir valores padrão. Comparado às instruções tradicionais if ou operadores ternários, ele torna o código mais conciso e legível, e deve ser ativamente usado em desenvolvimentos futuros.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video