23 Optionale Attribute

TypeScript bietet die Möglichkeit, Attribute als optional zu deklarieren. Dies eröffnet eine größere Flexibilität bei der Erstellung von Objekten und passt besser zu JavaScripts dynamischem Natur, da es in JavaScript üblich ist, Objekte mit verschiedenen Attributen zu erstellen.

23.1 Definition

Ein optionales Attribut wird durch das Anhängen eines Fragezeichens (?) nach dem Attributnamen gekennzeichnet. Wenn ein Attribut als optional gekennzeichnet ist, bedeutet dies, dass Sie das Attribut in einem Objekt entweder angeben oder weglassen können.

interface User {
  name: string;
  age?: number;
}

In diesem Beispiel kann ein User-Objekt entweder nur ein name-Attribut oder sowohl ein name als auch ein age-Attribut haben.

23.2 Verwendung

Wenn ein Objekt ein optionales Attribut hat, kann man es wie jedes andere Attribut behandeln. Man muss aber vorsichtig sein, da es undefined sein kann, wenn es nicht gesetzt wurde.

let user: User = {
  name: 'Alice'
};

console.log(user.age); // Ausgabe: undefined

Um sicherzustellen, dass das optionale Attribut vorhanden ist, bevor man es verwendet, sollte man es vor der Verwendung überprüfen.

if (user.age !== undefined) {
  console.log(user.age);
}

23.3 Optionale Verkettung

Manchmal kann es lästig sein, jedes Mal zu überprüfen, ob ein Attribut vorhanden ist, bevor man es verwendet. Glücklicherweise bietet TypeScript die optionale Verkettung (?.), mit der man auf sichere Weise auf Attribute zugreifen kann, die möglicherweise nicht vorhanden sind.

console.log(user.age?.toString()); // Ausgabe: undefined

Der Ausdruck ersetzt somit dieses if Statement

if (user && user.age !== undefined) {
  console.log(user.age.toString());
} else {
  console.log(undefined);
}

23.4 Nullish Coalescing Operator

Zusammen mit der optionalen Verkettung kann man den Nullish Coalescing Operator (??) verwenden, um einen Standardwert bereitzustellen, wenn das optionale Attribut nicht gesetzt ist.

console.log(user.age?.toString() ?? 'N/A'); // Ausgabe: 'N/A'

In diesem Beispiel gibt der Code ‘N/A’ aus, wenn das age-Attribut nicht gesetzt ist. D.h. der Ausdruck ersetzt diese if Statement

if (user && user.age !== undefined) { 
    console.log(user.age.toString()); 
} else { 
    console.log('N/A'); 
}