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 permet aux valeurs comme false, une chaîne vide ou le nombre 0 d'être évaluées telles quelles. 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

La syntaxe de base est la suivante :.

1let result = value ?? defaultValue;

• value est la cible vérifiée pour null ou undefined.
• defaultValue est la valeur retournée lorsque 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

Il y a une différence importante entre l'opérateur de coalescence nulle et l'opérateur OU logique. 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

• Comme montré, l'opérateur OU logique retourne la valeur par défaut 18 même lorsque la valeur est 0.

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

• En revanche, l'opérateur de coalescence nulle retourne la valeur originale même lorsqu'il s'agit de 0.

• Le choix entre l'opérateur OU logique et l'opérateur de coalescence nulle dépend de l'acceptabilité de 0 ou d'une chaîne vide. 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;
 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, la propriété age peut être un number, null ou undefined, donc l'opérateur de coalescence nulle est utilisé pour attribuer une valeur par défaut de 18.
• Pendant ce temps, la propriété name n'autorise que les string, donc la valeur est utilisée telle quelle.

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 OU logique traditionnel, il ne considère pas false, 0 ou les chaînes vides comme des valeurs 'falsy', ce qui le rend particulièrement utile lorsque vous voulez 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,
3                              // so the new value is assigned
4
5console.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

En utilisant une instruction if, cela peut être écrit comme suit :.

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

Méthode utilisant l'opérateur ternaire

Alternativement, en utilisant l'opérateur ternaire, cela peut être écrit comme suit :.

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"

Une méthode concise utilisant l'opérateur d'affectation par coalescence nulle

En revanche, en utilisant l'opérateur d'affectation par coalescence nulle, cela peut être écrit comme suit :.

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

Comme montré, l'opérateur d'affectation par coalescence nulle est beaucoup plus simple et lisible par rapport à d'autres méthodes d'affectation, améliorant ainsi la clarté 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.

Seuls null et undefined sont 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)

• Cet opérateur effectue l'affectation uniquement lorsque la valeur est null ou undefined. Par exemple, des valeurs comme une chaîne vide (""), 0, ou false ne sont pas ciblées.

Faites attention lorsque vous l'utilisez avec d'autres opérateurs..

 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"

• L'opérateur d'affectation par coalescence nulle peut produire des résultats inattendus lorsqu'il est utilisé avec d'autres opérateurs. Il est particulièrement important de comprendre la différence entre celui-ci et l'opérateur d'attribution logique OU.

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, le code devient plus concis et lisible.

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