// [5, 'foo', true]
}
4.9Union Types
Mit Union Types können wir zusammengesetzte Typen beschreiben. Mehrere Typen werden in einem kombiniert, sodass beispielsweise eine Variable Werte vom Typ string oder number annehmen könnte.
Empfangen wir einen Union Type als Funktionsparameter, unterstützt uns TypeScript gekonnt bei der Typprüfung. Mit dem Operator typeof können wir auf einen bestimmten Typ prüfen. Im folgenden Beispiel verlassen wir die Funktion, wenn es sich um einen string handelt. TypeScript stellt dann automatisch fest, dass im verbleibenden Programmablauf nur noch der Typ number für das Argument gilt.
let plz: string | number = 12345;
plz = '12345';
function doThings(arg: string | number) {
if (typeof arg === 'string') {
// String verarbeiten
return;
}
// arg hat den Typ 'number'
}
4.10Destrukturierende Zuweisungen
Mit ECMAScript 2015 und TypeScript können wir Objekte und Arrays »destrukturieren«. Was zunächst gefährlich klingt, ist ein nützliches Feature bei der Arbeit mit Daten.
Object Destructuring
Wenn wir einzelne Eigenschaften eines Objekts extrahieren und in Variablen schreiben möchten, so müssen wir die Variablen zuerst anlegen und dann mit den Werten aus dem Objekt befüllen. Mit der Destrukturierung lässt sich dieser Code auf eine Zeile verkürzen: Die Variablen werden automatisch angelegt und mit den gleichnamigen Eigenschaften aus dem Objekt befüllt.
const myObject = { title: 'Angular', year: 2016 };
const title = myObject.title;
const year = myObject.year;
// Object Destructuring
const { title, year } = myObject;
Array Destructuring
Ähnlich funktioniert die Destrukturierung auch für Arrays. Wir können damit vom ersten Element ausgehend einzelne Elemente aus dem Array in Variablen schreiben.
const dimensions = [1920, 1080];
const width = dimensions[0];
const height = dimensions[1];
// Array Destructuring
const [width, height] = dimensions;
Besonders mächtig wird diese Notation in Verbindung mit der Rest-Syntax. Wir können damit alle übrigen Elemente in einem neuen Array empfangen:
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
// one = 1
// two = 2
// rest = [3, 4, 5, 6]
Variablen als Propertys einsetzen
Der Vollständigkeit halber existiert auch der Rückweg für das Object Destructuring: Wenn wir einzelne Variablen haben, die wir in einem Objekt mit denselben Namen zusammenführen wollen, müssen wir den Namen üblicherweise doppelt angeben. ECMAScript 2015 bietet dafür eine Kurzform, sodass wir eine Variable direkt in das Objekt einfügen können.
const title = 'Angular';
const year = 2016;
const myObject1 = {
title: title,
year: year
};
// Kurzform
const myObject2 = { title, year };
4.11Decorators
Bei der Arbeit mit einem Framework muss man viele Dinge vorab konfigurieren und anpassen, damit sie ihren Zweck erfüllen können. Dies macht den Code unübersichtlich und erschwert zu einem späteren Zeitpunkt das Verständnis über die Anwendung. Irgendwann fällt es schwer, zwischen der wertvollen Geschäftslogik und dem notwendigen »Klebstoff« für das Framework zu unterscheiden.
Angular vermeidet dieses Dilemma durch den Einsatz von Decorators. Mit Decorators können wir Klassen, Methoden und Eigenschaften dekorieren und damit Metadaten hinzufügen. Man erkennt einen Decorator stets am @-Zeichen zu Beginn des Namens.
@Component({
// Konfigurations-Objekt
})
export class MyComponent { }
Funktionsklammern nicht vergessen!
Durch den Decorator @Component() erhält die Klasse eine Semantik innerhalb des Angular-Frameworks: Diese Klasse ist als Komponente zu behandeln. Alle Decorators von Angular sind Funktionen, daher darf man die Funktionsklammern bei der Verwendung nicht vergessen.
4.12Optional Chaining
Mit TypeScript 3.7 wurde das Feature Optional Chaining eingeführt. Optional Chaining ermöglicht einen sicheren Zugriff auf verschachtelte Objekte, bei denen ein Teil des Objekts potenziell null oder undefined zurückliefert. Dabei wertet TypeScript den Ausdruck Schritt für Schritt aus und bricht ab, sobald ein Objekt-Property null oder undefined liefert.
interface MyData {
bar: { baz: string } | null | string
}
const foo: MyData | null = {
bar: {
baz: 'Angular'
}
}
// Sicherer Zugriff auf "baz" ohne Optional
