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 paranull
ouundefined
.defaultValue
é o valor retornado quandovalue
énull
ouundefined
.
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 como0
, 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 propriedadeage
pode ser umnumber
,null
ouundefined
, então o operador de coalescência nula é usado para atribuir um valor padrão de18
. - Enquanto isso, a propriedade
name
permite apenasstring
, 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
ouundefined
. Ao contrário do operador lógico OU tradicional, ele não tratafalse
,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
ouundefined
. Por exemplo, valores como uma string vazia (""
),0
oufalse
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.