Optional Chaining in TypeScript
In diesem Artikel erklären wir das Konzept des Optional Chaining in TypeScript.
YouTube Video
Optional Chaining in TypeScript
Das Optional Chaining in TypeScript ist eine nützliche Funktion, um auf Eigenschaften tief verschachtelter Objekte oder Arrays zuzugreifen. Diese Funktion verhindert Fehler beim Zugriff auf nicht vorhandene Eigenschaften und ermöglicht das Schreiben von prägnantem und lesbarem Code.
Was ist Optional Chaining?
Der Optional-Chaining-Operator (?.) gibt undefined zurück, wenn auf eine Objekt-Eigenschaft oder Methode zugegriffen wird, die nicht existiert. Dies ermöglicht es dem Code, weiterzulaufen, ohne einen Fehler auszulösen, falls die Eigenschaft nicht existiert.
Zum Beispiel tritt ein Fehler auf, wenn Sie wie unten gezeigt auf Eigenschaften eines verschachtelten Objekts zugreifen und die Eigenschaft mit der üblichen Methode nicht existiert.
Beispiel
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- In diesem Fall tritt ein Fehler auf, wenn
addressnicht existiert. Optional Chaining kann verwendet werden, um dies zu verhindern.
Beispiel mit optionaler Verkettung
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- Durch die Verwendung von Optional Chaining werden Fehler vermieden, und stattdessen wird
undefinedzurückgegeben, wenn Eigenschaften nicht existieren.
Wie man Optional Chaining verwendet
Optional Chaining kann in verschiedenen Szenarien verwendet werden, beispielsweise beim Zugriff auf Eigenschaften, beim Aufrufen von Funktionen und beim Zugriff auf Arrays. Wir erklären, wie jede dieser Methoden verwendet wird.
Zugriff auf Eigenschaften
Sie können sicher auf verschachtelte Eigenschaften von Objekten zugreifen.
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
Dieser Code verwendet Optional Chaining, um auf die Eigenschaften city und country nur dann zuzugreifen, wenn die Eigenschaft location im Objekt company vorhanden ist.
Funktionsaufrufe
Optional Chaining kann auch prüfen, ob eine Funktion existiert, bevor sie aufgerufen wird.
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
Dieser Code verwendet Optional Chaining, um die Funktion greet nur dann sicher aufzurufen, wenn sie existiert. Es tritt kein Fehler auf, selbst wenn die Funktion nicht definiert ist.
Zugriff auf Arrays
Optional Chaining kann auf Arrays angewendet werden, um zu überprüfen, ob Elemente existieren.
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
Dieser Code greift nur dann auf die Array-Elemente zu, wenn team.members existiert, und gibt den Wert für vorhandene Indizes bzw. undefined für nicht vorhandene zurück.
Optional Chaining und der Nullish Coalescing Operator
Optional Chaining gibt undefined zurück, aber manchmal reicht das nicht aus. In diesem Fall kann der Nullish Coalescing Operator (??), der in TypeScript 3.7 eingeführt wurde, verwendet werden, um Standardwerte für null oder undefined bereitzustellen.
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
In Kombination mit der optionalen Verkettung können Sie noch flexibleren Code schreiben.
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Vorsichtsmaßnahmen bei der Verwendung der optionalen Verkettung
Bei der Verwendung von Optional Chaining ist es wichtig, die folgenden Punkte zu beachten:.
-
Unnötige Verwendung von Optional Chaining
- Die Verwendung von Optional Chaining bei Eigenschaften oder Methoden, die garantiert existieren, kann Ihren Code unnötig ausschweifend machen. Es sollte nur verwendet werden, wenn die Existenz des zugreifenden Ziels unsicher ist.
-
Tippfehler
- Die übermäßige Verwendung von Optional Chaining kann es erschweren, Tippfehler zu erkennen, die dazu führen, dass unbeabsichtigte Eigenschaften angesprochen werden. Führen Sie ordnungsgemäße Typprüfungen durch und verwenden Sie sie mit Vorsicht.
Code-Zusammenfassung
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Zusammenfassung
Die optionale Verkettung in TypeScript ermöglicht prägnanten Code und vermeidet Fehler beim Zugriff auf tief verschachtelte Objekte oder Arrays. Außerdem ermöglicht die Kombination mit dem Nullish Coalescing Operator das Festlegen von Standardwerten und die Entwicklung flexiblerer Logik. Bei angemessener Verwendung kann es die Codesicherheit und Lesbarkeit erheblich verbessern.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.