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 aufnull
oderundefined
überprüft wird.defaultValue
ist der Wert, der zurückgegeben wird, wennvalue
null
oderundefined
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 Wert0
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 als0
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 Eigenschaftage
einenumber
,null
oderundefined
sein, daher wird der Nullish-Coalescing-Operator verwendet, um einen Standardwert von18
zuzuweisen. - Die Eigenschaft
name
erlaubt hingegen nurstring
, daher wird der Wert unverändert verwendet.
Zusammenfassung
- Der Nullish Coalescing Operator hilft, einen Standardwert nur dann festzulegen, wenn der Wert
null
oderundefined
ist. Im Gegensatz zum traditionellen logischen ODER-Operator behandelt erfalse
,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
oderundefined
ist. Zum Beispiel werden Werte wie ein leerer String (""
),0
oderfalse
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.