Nullish-Coalescing-Operator in TypeScript

In diesem Artikel erklären wir den Nullish-Coalescing-Operator in TypeScript.

YouTube Video

Nullish-Coalescing-Operator in TypeScript

Der Nullish-Coalescing-Operator (??) in TypeScript ähnelt der Kurzschlussbewertung (Short-Circuit Evaluation) in JavaScript, wird jedoch explizit verwendet, um einen Fallback-Wert nur dann bereitzustellen, wenn die linke Seite null oder undefined ist. Dieser Operator ermöglicht es, einfach zu prüfen, ob ein Wert null oder undefined ist, und bei Bedarf einen Standardwert festzulegen.

Der Nullish-Coalescing-Operator (??) gibt den rechten Wert nur dann zurück, wenn die linke Seite null oder undefined ist. Das bedeutet, dass Werte wie false, ein leerer String oder die Zahl 0 unverändert bleiben. Dies ist ein wesentlicher Unterschied zum traditionellen logischen OR-Operator (||). Dieser Operator wurde in TypeScript 3.7 eingeführt.

Grundlegende Syntax

1let result = value ?? defaultValue;

• value: Das zu prüfende Objekt, ob es null oder undefined ist
• defaultValue: Der zurückgegebene Wert, wenn value null oder undefined ist

Beispielhafte Verwendung

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 gibt die Funktion getUserName "Default User" zurück, wenn userName null oder undefined ist, ansonsten wird der Wert von userName zurückgegeben.

Unterschied zum logischen OR-Operator

Der logische OR-Operator behandelt Werte wie false, 0 und "" (leerer String) als "falsch", ebenso wie null und undefined. Der Nullish-Coalescing-Operator hingegen verwendet nur null und undefined als Fallback.

Beispiel für den logischen OR-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

Beispiel für den 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

Die Wahl zwischen dem logischen OR-Operator und dem Nullish Coalescing Operator hängt davon ab, ob 0 und leere Strings akzeptabel sind. Wenn Sie beispielsweise das Alter eines Benutzers als 0 beibehalten möchten, müssen Sie den Nullish Coalescing Operator verwenden.

Kombination mit Typen

Sie können die Robustheit Ihres Codes verbessern, indem Sie die Typsicherheit von TypeScript in Kombination mit dem Nullish-Coalescing-Operator nutzen. Im folgenden Beispiel werden Standardwerte verwendet, wenn bestimmte Eigenschaften null oder undefined sind.

 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

• Im User-Interface ist age vom Typ number | null, sodass null oder undefined als Werte zulässig sind.
• Die Funktion displayUserInfo gibt "Anonymous" zurück, wenn name null oder undefined ist, und 18, wenn age null oder undefined ist.

Zusammenfassung

Der Nullish Coalescing Operator hilft, einen Standardwert nur dann festzulegen, wenn der Wert null oder undefined ist. Im Gegensatz zum traditionellen logischen OR-Operator behandelt er false, 0 oder leere Strings nicht als "falsch" und ist daher besonders nützlich, um diese Werte zu erhalten. Darüber hinaus ermöglicht die Kombination mit dem Typsystem von TypeScript die Erstellung von robusterem und lesbarerem Code.

Durch die effektive Nutzung des Nullish Coalescing Operators können Sie Logik zum Setzen von Standardwerten prägnanter schreiben und unnötige null-Überprüfungen reduzieren.

Nullish Coalescing Zuweisungsoperator in TypeScript

Der Nullish Coalescing Zuweisungsoperator (??=) ist ein relativ neuer Operator in TypeScript, der eine praktische Methode bereitstellt, um einen Wert nur dann zuzuweisen, wenn die Variable null oder undefined ist. Hier erklären wir, wie dieser Operator funktioniert, in welchen Situationen er effektiv ist, und liefern Beispiele mit Code.

Was ist der Nullish Coalescing Zuweisungsoperator?

Der Nullish Coalescing Zuweisungsoperator ist ein Zuweisungsoperator, der auf dem Nullish Coalescing Operator basiert. Dieser Operator wird verwendet, um einen neuen Wert nur dann zuzuweisen, wenn die Variable null oder undefined ist.

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

Mit diesem Operator können Sie die Logik "zuweisen, wenn die Variable undefined oder null ist" prägnanter schreiben.

Vergleich mit traditionellen Zuweisungsmethoden

Ohne den Nullish Coalescing Zuweisungsoperator müssten Sie eine if-Anweisung oder einen ternären Operator verwenden, um dasselbe Verhalten zu erzielen. Vergleichen wir dies mit den traditionellen Zuweisungsmethoden.

Konventionelle Methode

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

Methode mit dem ternären Operator

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

Kompakte Methode mit dem ??=-Operator

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

Der Nullish Coalescing Zuweisungsoperator ist viel einfacher und lesbarer im Vergleich zu anderen Zuweisungsmethoden und verbessert die Code-Lesbarkeit.

Spezifische Beispiele für die Verwendung von ??=

Der Nullish Coalescing Zuweisungsoperator ist in verschiedenen Szenarien nützlich, z. B. beim Initialisieren von Objekteigenschaften und Festlegen von Standardwerten. Hier sind einige konkrete Beispiele.

Initialisierung von Objekteigenschaften

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

Initialisierung von Arrays

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

Festlegen von Standardwerten für Funktionsargumente

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

Hinweise und Einschränkungen

Der Nullish Coalescing Zuweisungsoperator ist sehr nützlich, aber es gibt einige Vorsichtsmaßnahmen.

• Nur zielt auf null und undefined: Dieser Operator weist nur zu, wenn der Wert null oder undefined ist. Zum Beispiel werden leere Zeichenfolgen (""), 0 und false nicht berücksichtigt.

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)

• Kombination mit anderen Operatoren: Die Verwendung des Nullish Coalescing Zuweisungsoperators mit anderen Operatoren kann zu unbeabsichtigten Ergebnissen führen. Es ist besonders wichtig, den Unterschied zwischen ihm und dem logischen OR-Zuweisungsoperator zu verstehen.

 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"

Beispielcode

 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]

Durch die Verwendung des Nullish Coalescing Zuweisungsoperators können Sie überflüssigen Code eliminieren und flüssigeren, eleganteren TypeScript-Code schreiben.

Zusammenfassung

Der Nullish-Koaleszenz-Zuweisungsoperator (??=) ist eine der einfachen und effizienten Zuweisungsoperationen in TypeScript. Er ist besonders nützlich, wenn Sie Überprüfungen auf null oder undefined durchführen müssen, während Sie Standardwerte festlegen. Im Vergleich zu herkömmlichen if-Anweisungen oder ternären Operatoren macht er den Code kompakter und lesbarer und sollte in der zukünftigen Entwicklung aktiv genutzt werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video