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. Dadurch können Werte wie false, ein leerer String oder die Zahl 0 so ausgewertet werden, wie sie sind. Dies ist ein wesentlicher Unterschied zum traditionellen logischen OR-Operator (||). Dieser Operator wurde in TypeScript 3.7 eingeführt.

Grundlegende Syntax

Die grundlegende Syntax ist wie folgt:.

1let result = value ?? defaultValue;

• value ist das Ziel, das auf null oder undefined überprüft wird.
• defaultValue ist der Wert, der zurückgegeben wird, 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

Es gibt einen wichtigen Unterschied zwischen dem Nullish-Coalescing-Operator und dem logischen ODER-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

• Wie gezeigt gibt der logische ODER-Operator den Standardwert 18 zurück, selbst wenn der Wert 0 ist.

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

• Der Nullish-Coalescing-Operator hingegen gibt den ursprünglichen Wert zurück, selbst wenn er 0 ist.

• Die Wahl zwischen dem logischen ODER-Operator und dem Nullish-Coalescing-Operator hängt davon ab, ob 0 oder ein leerer String akzeptabel ist. 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;
 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 der User-Schnittstelle kann die Eigenschaft age eine number, null oder undefined sein, daher wird der Nullish-Coalescing-Operator verwendet, um einen Standardwert von 18 zuzuweisen.
• Die Eigenschaft name erlaubt hingegen nur string, daher wird der Wert unverändert verwendet.

Zusammenfassung

• Der Nullish Coalescing Operator hilft, einen Standardwert nur dann festzulegen, wenn der Wert null oder undefined ist. Im Gegensatz zum traditionellen logischen ODER-Operator behandelt er false, 0 oder leere Strings nicht als 'falsy', was ihn besonders nützlich macht, wenn Sie diese Werte beibehalten möchten. 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,
3                              // so the new value is assigned
4
5console.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

Mit einer if-Anweisung kann es wie folgt geschrieben werden:.

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

Methode mit dem ternären Operator

Alternativ kann es mit dem ternären Operator wie folgt geschrieben werden:.

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"

Eine prägnante Methode mit dem Nullish-Coalescing-Zuweisungsoperator

Andererseits kann es mit dem Nullish-Coalescing-Zuweisungsoperator wie folgt geschrieben werden:.

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

Wie gezeigt ist der Nullish-Coalescing-Zuweisungsoperator wesentlich einfacher und lesbarer im Vergleich zu anderen Zuweisungsmethoden, was die Codeklarheit verbessert.

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 null und undefined werden 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)

• Dieser Operator führt die Zuweisung nur aus, wenn der Wert null oder undefined ist. Zum Beispiel werden Werte wie ein leerer String (""), 0 oder false nicht berücksichtigt.

Seien Sie vorsichtig bei der Verwendung mit anderen Operatoren..

 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"

• Der Nullish-Coalescing-Zuweisungsoperator kann unerwünschte Ergebnisse liefern, wenn er mit anderen Operatoren verwendet wird. Es ist besonders wichtig, den Unterschied zwischen ihm und dem logischen OR-Zuweisungsoperator zu verstehen.

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 wird der Code prägnanter und lesbarer.

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