Wie funktionieren optionale Funktionsparameter und optionale Eigenschaften von Objekten in TypeScript, was sind die Unterschiede und welche Nuancen gibt es bei ihrer Verwendung? Nennen Sie Beispiele für typische Probleme und Fehler.

Antwort.

Optionale Funktionsparameter werden mit einem Fragezeichen (?) nach dem Namen des Parameters angegeben. Das gleiche gilt für optionale Eigenschaften in Objekten (Schnittstellen oder Typen).

• Für Funktionen:

function greet(name?: string) {
  console.log(`Hallo, ${name ?? 'Fremder'}`);
}
greet(); // Hallo, Fremder
greet('John'); // Hallo, John

• Für Objekte:

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

Nuancen:

• Ein optionaler Parameter kann beim Funktionsaufruf weggelassen werden, und dann wird der Wert undefined sein.
• Eine optionale Eigenschaft kann in einem Objekt fehlen.
• Verwechseln Sie nicht: Wenn in der Schnittstelle eine Eigenschaft nicht als optional angegeben ist, ist sie zwingend erforderlich!
• Ein optionaler Parameter muss zuletzt in der Parameterliste der Funktion stehen.

Fangfrage.

Wenn eine Funktion mit einem optionalen Parameter vom Typ string (function fn(x?: string)) deklariert ist, kann man sie dann ausdrücklich mit undefined aufrufen? Was ist der Unterschied zwischen fn() und fn(undefined)?

Antwort: Ja, man kann sie mit undefined aufrufen: fn(undefined) und fn() — das Ergebnis ist gleich, aber die Funktion erhält x === undefined. Wenn jedoch ein Standardwert in der Signatur definiert ist:

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

Wenn das Argument nicht als optional deklariert ist (kein ? oder kein Standardwert), wird der Aufruf fn() zu einem Kompilierungsfehler.

Beispiele für reale Fehler aufgrund mangelnden Wissens über die Feinheiten des Themas.

---

Geschichte

Im Interface user wurde die Eigenschaft phone: string (ohne ?), aber vergessen, sie beim Erstellen der Objektinstanz hinzuzufügen. Folglich begann der TypeScript-Compiler, einen Fehler wegen fehlender Pflicht-Eigenschaft zu melden. Eine vorübergehende Lösung war das Hinzufügen von phone: undefined, was jedoch der Typisierung widersprach, da string !== undefined, und zu noch mehr Validierungsfehlern führte.

---

Geschichte

Es wurden mehrere optionale Parameter in der Funktion definiert, aber nicht am Ende der Parameterliste platziert. TypeScript gab einen Fehler aus, und bei der Umstellung der Parameter änderte sich die Reihenfolge der Übereinstimmung der übergebenen Werte mit den Parametern, was zu Verwirrung und fehlerhaftem Funktionieren der Funktion führte.

---

Geschichte

Optionale Felder in Schnittstellen wurden beim Beschreiben des Datentyps für eine externe API vergessen (zum Beispiel, Nachname des Kunden? string), was dazu führte, dass bei einer Änderung des Schemas auf einer Seite diese Felder nicht mehr gesendet wurden, während auf der anderen Seite der Code bei dem Versuch, diese ohne Überprüfung auf undefined zu lesen, abstürzte.