Angular. Ferdinand Malcher
} console.log(myObject); // { title: 'Angular', year: 2016 }
Wir initialisieren die Variable copy mit einem neuen (leeren) Objekt. Anschließend kopieren wir mit dem Spread-Operator ... alle Eigenschaften von myObject in das neue Objekt. Im letzten Schritt setzen wir die Eigenschaft year auf den Wert 2020. Existiert die Eigenschaft bereits, wird sie überschrieben. Damit haben wir die Eigenschaften von myObject in ein anderes Objekt expandiert. Das Objekt wurde also kopiert, und wir können es gefahrlos verändern.
Klasseninstanzen können nicht geklont werden
Bitte beachten Sie, dass diese Idee nur für Plain Objects funktioniert. Als Grundlage erzeugen wir immer ein leeres untypisiertes Objekt { }, in das wir die Eigenschaften eines anderen Objekts kopieren. »Klonen« wir also auf diese Weise ein Objekt, das eine Instanz einer Klasse ist, so werden nur die Eigenschaften kopiert, nicht aber die klasseneigenen Methoden. Die inhaltliche Verbindung mit der Klasse geht verloren, und es wird lediglich eine flache Kopie (engl. Shallow Copy) erzeugt.
Diese Eigenschaft ist vor allem interessant, wenn wir es mit komplexeren Objekten zu tun haben: Es wird stets nur die obere Ebene eines Objekts kopiert. Tiefere Zweige eines Objekts oder Arrays müssen wir zunächst mit der Spread-Syntax einzeln klonen und anschließend neu zusammenbauen. Wird diese Aufgabe zu kompliziert, sollten wir auf eine Bibliothek zurückgreifen, die eine Deep Copy erzeugt, sodass wir das Objekt gefahrlos verändern können.
Array-Elemente kopieren
Der Spread-Operator funktioniert ähnlich auch für Arrays. Wir können damit die Elemente eines Arrays in ein anderes Array kopieren. Dieses Feature können wir nutzen, um eine Kopie eines Arrays zu erzeugen, aber auch, um mehrere Arrays zusammenzufügen.
const numbers = [1, 2, 3, 4, 5];
const numbers1 = [...numbers, 6];
const numbers2 = [...numbers, 0, ...numbers];
console.log(numbers1); // [1, 2, 3, 4, 5, 6]
console.log(numbers2); // [1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5]
Funktionsargumente übergeben
Die Spread-Syntax lässt sich nicht nur in Arrays einsetzen, sondern auch für Funktionsargumente. Wollen wir die Elemente eines Arrays einzeln als Argumente an eine Funktion übergeben, können wir also den Spread-Operator nutzen.
const args = [5, 'foo', true];
doThings(args[0], args[1], args[2]);
doThings(...args);
Rest-Syntax: Funktionsargumente empfangen
Erhält eine Funktion mehrere Argumente, so können wir diese elegant in einem Array erfassen. Weil wir hiermit den umgekehrten Weg zum vorherigen Beispiel einschlagen, hat diese Syntax auch einen anderen Namen: Rest-Syntax oder Rest-Parameter. Anstatt ein Array zu expandieren, führen wir alle Funktionsargumente in einem Array zusammen.
function doThings(...arguments) {
console.log(arguments); // [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