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 permite que valores como false, uma string vazia ou o número 0 sejam avaliados como estão. 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

A sintaxe básica é a seguinte:.

1let result = value ?? defaultValue;

• value é o alvo verificado para null ou undefined.
• defaultValue é o valor retornado quando value é 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

Há uma diferença importante entre o operador de coalescência nula e o 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

• Como mostrado, o operador lógico OU retorna o valor padrão 18 mesmo quando o valor é 0.

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

• Por outro lado, o operador de coalescência nula retorna o valor original mesmo quando é 0.

• A escolha entre o operador lógico OU e o operador de coalescência nula depende de 0 ou uma string vazia ser aceitável. 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;
 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, a propriedade age pode ser um number, null ou undefined, então o operador de coalescência nula é usado para atribuir um valor padrão de 18.
• Enquanto isso, a propriedade name permite apenas string, então o valor é usado como está.

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 quando se deseja 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,
3                              // so the new value is assigned
4
5console.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

Usando uma declaração if, ele pode ser escrito da seguinte forma:.

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

Método usando o operador ternário

Alternativamente, usando o operador ternário, ele pode ser escrito da seguinte forma:.

1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"

Um método conciso usando o operador de atribuição de coalescência nula

Por outro lado, usando o operador de atribuição de coalescência nula, ele pode ser escrito assim:.

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

Como mostrado, 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 clareza 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.

Apenas null e undefined são alvos..

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)

• Este operador realiza atribuição apenas quando o valor é null ou undefined. Por exemplo, valores como uma string vazia (""), 0 ou false não são alvos.

Tenha cuidado ao usá-lo com outros operadores..

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

• O operador de atribuição de coalescência nula pode produzir resultados não intencionais quando usado com outros operadores. É especialmente importante entender a diferença entre ele e o operador de atribuição lógico OU.

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 a declarações if tradicionais ou operadores ternários, o código se torna mais conciso e legível.

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