Nullish Coalescing-operator in TypeScript

In dit artikel leggen we de Nullish Coalescing-operator in TypeScript uit.

YouTube Video

Nullish Coalescing-operator in TypeScript

De Nullish Coalescing-operator (??) in TypeScript is vergelijkbaar met de short-circuit-evaluatie in JavaScript, maar wordt explicieter gebruikt om een terugvalwaarde te bieden alleen wanneer de linkerzijde null of undefined is. Met deze operator kun je eenvoudig controleren of een waarde null of undefined is en indien nodig een standaardwaarde instellen.

De Nullish Coalescing-operator (??) retourneert de rechterwaarde alleen als de linkerzijde null of undefined is. Hierdoor kunnen waarden zoals false, een lege string of het getal 0 worden geëvalueerd zoals ze zijn. Dit is een belangrijk verschil met de traditionele logische OF-operator (||). Deze operator werd geïntroduceerd in TypeScript 3.7.

Basis Syntax

De basis syntaxis is als volgt:.

1let result = value ?? defaultValue;

• value is het doel dat wordt gecontroleerd op null of undefined.
• defaultValue is de waarde die wordt geretourneerd wanneer value null of undefined is.

Voorbeeldgebruik

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

Hier retourneert de functie getUserName "Default User" als userName null of undefined is, anders retourneert het de waarde van userName.

Verschil met de logische OF-operator

Er is een belangrijk verschil tussen de nullish-coalescing-operator en de logische OF-operator. De logische OF-operator behandelt waarden zoals false, 0 en "" (lege string) als "falsy," vergelijkbaar met null en undefined. Aan de andere kant gebruikt de Nullish Coalescing-operator alleen null en undefined als terugval.

Voorbeeld van de logische OF-operator

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

• Zoals getoond, retourneert de logische OF-operator de standaardwaarde 18, zelfs wanneer de waarde 0 is.

Voorbeeld van de nullish-coalescing-operator

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

• De nullish-coalescing-operator daarentegen retourneert de oorspronkelijke waarde, zelfs wanneer deze 0 is.

• De keuze tussen de logische OF-operator en de nullish-coalescing-operator hangt af van of 0 of een lege string acceptabel is. Als u bijvoorbeeld de leeftijd van een gebruiker als 0 wilt behouden, moet u de nullish-coalescing-operator gebruiken.

Combinatie met typen

Je kunt de robuustheid van je code verbeteren door gebruik te maken van TypeScript's typeveiligheid in combinatie met de Nullish Coalescing-operator. In het volgende voorbeeld worden standaardwaarden gebruikt als bepaalde eigenschappen null of undefined zijn.

 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

• In de User interface kan de eigenschap age een number, null of undefined zijn, dus wordt de nullish-coalescing-operator gebruikt om een standaardwaarde van 18 toe te wijzen.
• Ondertussen staat de eigenschap name alleen string toe, dus wordt de waarde gebruikt zoals deze is.

Samenvatting

• De nullish-coalescing-operator helpt bij het instellen van een standaardwaarde alleen wanneer de waarde null of undefined is. In tegenstelling tot de traditionele logische OF-operator behandelt deze false, 0 of lege strings niet als 'vals', waardoor het vooral handig is wanneer u die waarden wilt behouden. Bovendien kunt u, door het te combineren met het typesysteem van TypeScript, robuustere en beter leesbare code maken.
• Door effectief gebruik te maken van de nullish coalescing-operator kunt u beknopt logica schrijven voor het instellen van standaardwaarden, terwijl onnodige null-controles worden verminderd.

Nullish Coalescing Toewijzingsoperator in TypeScript

De nullish coalescing toewijzingsoperator (??=) is een relatief nieuwe operator die in TypeScript is geïntroduceerd en biedt een handige methode om een waarde toe te wijzen alleen als de variabele null of undefined is. Hier leggen we uit hoe deze operator werkt, in welke situaties hij effectief is en geven we voorbeelden met code.

Wat is de Nullish Coalescing Toewijzingsoperator

De nullish-coalescing-toewijzingsoperator is een toewijzingsoperator die is gebaseerd op de nullish-coalescing-operator. Deze operator wordt gebruikt om een nieuwe waarde toe te wijzen alleen als de variabele null of undefined is.

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"

Met deze operator kunt u de logica van "toewijzen als de variabele undefined of null is" beknopter schrijven.

Vergelijking met Traditionele Toewijzingsmethoden

Zonder de nullish-coalescing-toewijzingsoperator zou een if-statement of een ternary-operator nodig zijn om hetzelfde gedrag te bereiken. Laten we de vergelijking maken met de traditionele toewijzingsmethoden.

Conventionele methode

Met behulp van een if-statement kan het als volgt worden geschreven:.

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

Methode met behulp van de tertiaire operator

Als alternatief kan het met behulp van de tertiaire operator als volgt worden geschreven:.

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

Een beknopte methode met de nullish-coalescing-toekenningsoperator

Met behulp van de nullish-coalescing-toekenningsoperator kan het daarentegen als volgt worden geschreven:.

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

Zoals getoond, is de nullish-coalescing-toekenningsoperator veel eenvoudiger en leesbaarder in vergelijking met andere toekenningsmethoden, wat de code duidelijker maakt.

Specifieke Voorbeelden van het Gebruik van ??=

De nullish-coalescing-toewijzingsoperator is nuttig in verschillende scenario's, zoals het initialiseren van objecteigenschappen en het instellen van standaardwaarden. Hier zijn enkele specifieke voorbeelden.

Initialisatie van objecteigenschappen

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

Initialisatie van arrays

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

Instellen van standaardwaarden voor functienaamargumenten

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

Opmerkingen en Beperkingen

De nullish-coalescing-toewijzingsoperator is erg nuttig, maar er zijn enkele kanttekeningen.

• Alleen null en undefined worden gericht..
  • Deze operator voert toekenning alleen uit wanneer de waarde null of undefined is. Bijvoorbeeld waarden zoals een lege string (""), 0 of false worden niet gericht.

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)

• Wees voorzichtig bij gebruik in combinatie met andere operators..
  • De nullish-coalescing-toekenningsoperator kan ongewenste resultaten opleveren bij gebruik met andere operators. Het is vooral belangrijk om het verschil tussen deze en de logische OF-toewijzingsoperator te begrijpen.

 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"

Voorbeeldcode

 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]

Door de nullish-coalescing-toewijzingsoperator te gebruiken, kunt u onnodige code elimineren en soepelere, elegantere TypeScript-code schrijven.

Samenvatting

De nullish coalescing toekenningsoperator (??=) is een van de eenvoudige en efficiënte toekenningsoperaties in TypeScript. Het is bijzonder nuttig wanneer je controles moet uitvoeren op null of undefined bij het instellen van standaardwaarden. In vergelijking met traditionele if-statements of tertiaire operators wordt de code beknopter en leesbaarder.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video