Opérateur de coalescence nullish en TypeScript

Dans cet article, nous expliquerons l'opérateur de coalescence nullish en TypeScript.

YouTube Video

Opérateur de coalescence nullish en TypeScript

L'opérateur de coalescence nullish (??) en TypeScript est similaire à l'évaluation en court-circuit de JavaScript mais est utilisé plus explicitement pour fournir une valeur de secours uniquement lorsque le côté gauche est null ou undefined. Cet opérateur vous permet de vérifier facilement si une valeur est null ou undefined et de définir une valeur par défaut si nécessaire.

L'opérateur de coalescence nullish (??) retourne la valeur de droite uniquement si le côté gauche est null ou undefined. Cela signifie que des valeurs comme false, une chaîne vide ou le nombre 0 restent inchangées. C'est une différence majeure par rapport à l'opérateur logique OU traditionnel (||). Cet opérateur a été introduit dans TypeScript 3.7.

Syntaxe de base

1let result = value ?? defaultValue;

• value : L'élément à vérifier s'il est null ou undefined
• defaultValue : La valeur renvoyée si value est null ou undefined

Exemple d'utilisation

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

Ici, la fonction getUserName retourne "Default User" si userName est null ou undefined; sinon, elle retourne la valeur de userName.

Différence avec l'opérateur logique OU

L'opérateur logique OU considère les valeurs telles que false, 0 et "" (chaîne vide) comme étant "falsy", tout comme null et undefined. En revanche, l'opérateur de coalescence nullish utilise uniquement null et undefined comme valeur de secours.

Exemple de l'opérateur logique 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

Exemple de l'opérateur de coalescence nullish

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

Choisir entre l'opérateur logique OU et l'opérateur de coalescence nullish dépend de l'acceptation de 0 et des chaînes vides. Par exemple, si vous souhaitez conserver l'âge d'un utilisateur à 0, vous devez utiliser l'opérateur de coalescence nullish.

Combinaison avec des types

Vous pouvez améliorer la robustesse de votre code en tirant parti de la sécurité des types de TypeScript en combinaison avec l'opérateur de coalescence nullish. Dans l'exemple suivant, des valeurs par défaut sont utilisées lorsque certaines propriétés sont 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

• Dans l'interface User, age est de type number | null, permettant à null ou undefined d'être ses valeurs.
• La fonction displayUserInfo retourne "Anonymous" si name est null ou undefined, et 18 si age est null ou undefined.

Résumé

L'opérateur de coalescence nullish sert à définir une valeur par défaut uniquement lorsque la valeur est null ou undefined. Contrairement à l'opérateur logique OU traditionnel, il ne considère pas false, 0 ou les chaînes vides comme "falsy", ce qui le rend particulièrement utile pour préserver ces valeurs. De plus, le combiner avec le système de typage de TypeScript permet de créer un code plus robuste et lisible.

En utilisant efficacement l'opérateur de coalescence nullish, vous pouvez écrire de manière concise des logiques pour définir des valeurs par défaut tout en réduisant les vérifications inutiles de null.

L'opérateur d'affectation avec coalescence nullish dans TypeScript

L'opérateur d'affectation avec coalescence nullish (??=) est un opérateur relativement nouveau introduit dans TypeScript, offrant une méthode pratique pour affecter une valeur uniquement si la variable est null ou undefined. Ici, nous expliquerons comment cet opérateur fonctionne, dans quelles situations il est efficace, et fournirons des exemples avec du code.

Qu'est-ce que l'opérateur d'affectation avec coalescence nullish

L'opérateur d'attribution de coalescence nullish est un opérateur d'affectation basé sur l'opérateur de coalescence nullish. Cet opérateur est utilisé pour affecter une nouvelle valeur uniquement si la variable est 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"

En utilisant cet opérateur, vous pouvez écrire plus succinctement la logique d'« affecter si la variable est undefined ou null ».

Comparaison avec les méthodes d'affectation traditionnelles

Sans l'opérateur d'attribution de coalescence nullish, vous devriez utiliser une instruction if ou un opérateur ternaire pour obtenir le même comportement. Comparons avec les méthodes d'affectation traditionnelles.

Méthode conventionnelle

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

Méthode utilisant l'opérateur ternaire

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

Méthode concise utilisant l'opérateur ??=

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

L'opérateur d'attribution de coalescence nullish est beaucoup plus simple et lisible comparé à d'autres méthodes d'affectation, ce qui améliore la lisibilité du code.

Exemples spécifiques d'utilisation de ??=

L'opérateur d'attribution de coalescence nullish est utile dans divers scénarios, comme l'initialisation des propriétés d'objet et la définition de valeurs par défaut. Voici quelques exemples spécifiques.

Initialisation des propriétés d'objet

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

Initialisation des tableaux

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

Définition des valeurs par défaut pour les arguments de fonction

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

Remarques et contraintes

L'opérateur d'attribution de coalescence nullish est très utile, mais comporte certaines mises en garde.

• Cible uniquement null et undefined : Cet opérateur assigne uniquement si la valeur est null ou undefined. Par exemple, les chaînes vides (""), 0 et false ne sont pas ciblés.

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)

• Combinaison avec d'autres opérateurs : Utiliser l'opérateur d'attribution de coalescence nullish avec d'autres opérateurs peut entraîner des résultats inattendus. Il est particulièrement important de comprendre la différence entre celui-ci et l'opérateur d'attribution logique 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"

Exemple de code

 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]

En utilisant l'opérateur d'attribution de coalescence nullish, vous pouvez éliminer le code inutile et écrire du code TypeScript plus fluide et élégant.

Résumé

L'opérateur d'affectation fusion nullish (??=) est l'une des opérations d'affectation simples et efficaces dans TypeScript. Il est particulièrement utile lorsque vous devez vérifier la présence de null ou undefined tout en définissant des valeurs par défaut. Comparé aux instructions if traditionnelles ou aux opérateurs ternaires, il rend le code plus concis et lisible, et devrait être activement utilisé dans les développements futurs.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video