werden.
interface Contact {
firstname: string;
lastname: string;
age?: number;
}
const contact: Contact = {
firstname: 'Max',
lastname: 'Mustermann'
}
Fügen wir dem Objekt eine zusätzliche Eigenschaft hinzu oder hat eine der Eigenschaften nicht den Typen, der im Interface definiert wurde, so erhalten wir einen Fehler.
Interface für Klassen
Interfaces können auch dafür verwendet werden, die Struktur einer Klasse vorzugeben. Dafür wird nach dem Klassennamen das Schlüsselwort implements angefügt, gefolgt vom Namen des Interface. Der Compiler wird nun signalisieren, dass wir alle definierten Eigenschaften und Methoden des Interface implementieren müssen.
interface Human {
name: string;
age: number;
}
class Person implements Human {
name = 'Erika';
age = 25;
}
4.6Template-Strings
Backticks, keine Anführungszeichen
Mit einem normalen String in einfachen Anführungszeichen ist es nicht möglich, einen Text über mehrere Zeilen anzugeben. Ab ECMAScript 2015 gibt es allerdings auch die Möglichkeit, Template-Strings im Code zu nutzen. Ein Template-String wird mit schrägen `Hochkommata` (auch Accent grave oder Backtick) eingeleitet und beendet, nicht mit Anführungszeichen. Der String kann sich schließlich über mehrere Zeilen erstrecken und endet erst beim schließenden Backtick.
Ausdrücke in Strings einbetten
Mit Template-Strings können wir außerdem Ausdrücke direkt in einen String einbetten. Dafür gab es zuvor keine elegante Möglichkeit, und wir mussten stets Strings konkatenieren, um mehrere Zeichenketten zusammenzubringen.
const text = `Mein Name ist ${firstname}.
Ich bin ${age} Jahre alt.`;
const url = `http://example.org/user/${id}/friends?page=${page}`;
Listing 4–9 Template-String mit eingebetteten Ausdrücken
Wir werden Template-Strings mit Angular vor allem nutzen, um eine URL mit mehreren Parametern zusammenzubauen.
4.7Arrow-Funktionen/Lambda-Ausdrücke
Eine Arrow-Funktion ist eine Kurzschreibweise für eine normale function() in JavaScript. Auch die Bezeichnung Lambda-Ausdruck ist verbreitet.
Der rechtsseitige Ausdruck dient als Rückgabewert.
Die Definition einer anonymen function() verkürzt sich damit elegant zu einem Pfeil =>. Erhält die Funktion genau ein Argument, können die runden Klammern auf der linken Seite sogar weggelassen werden. Auch die geschweiften Klammern auf der rechten Seite können eingespart werden: Lässt man die Klammern weg, wird das Ergebnis des rechtsseitigen Ausdrucks als Rückgabewert für die Funktion verwendet. Wir müssen also kein return-Statement verwenden. Diese vier Definitionen sind gleichwertig:
function (foo) { return foo + 1; }
(foo) => { return foo + 1; }
foo => { return foo + 1; }
foo => foo + 1;
Damit können anonyme Funktionen mit nur wenig Tipparbeit definiert werden. Das folgende Beispiel zeigt, wie wir alle geraden Zahlen aus einer Liste ermitteln können. Zuerst wird eine herkömmliche Funktionsdeklaration verwendet, wie wir sie aus ES5 kennen. Die Arrow-Funktion im zweiten Beispiel ist allerdings wesentlich kompakter: Es ist möglich, einen einzeiligen Ausdruck einzusetzen, um die Funktion zu deklarieren.
const numbers = [0, 1, 2, 3, 4];
const even1 = numbers.filter(
function(value) {
return value % 2 === 0;
}
);
const even2 = numbers.filter(
value => value % 2 === 0
);
Listing 4–10 Herkömmliche Callback-Funktion
Bei komplexerer Logik kann auch ein mehrzeiliger Block verwendet werden. In diesem Fall muss der Rückgabewert allerdings mit return aus der Funktion herausgegeben werden.
this-Kontext
Ein weiterer Vorteil der Arrow-Funktion ist, dass sie keinen eigenen this-Kontext besitzt. Mit der normalen function() ist es oft erforderlich, this in einer temporären Variable zu speichern, um in einer Callback-Funktion überhaupt darauf zugreifen zu können. Mit Arrow-Funktionen existiert dieses Problem nicht, denn die Variable this wird stets aus dem übergeordneten Kontext verwendet. Dies entspricht genau dem, was man beim Programmieren mit Klassen gemeinhin benötigt.
class User {
firstname: string;
friends: User[];
showFriends() {
const self = this;
this.friends.forEach(function(friend) {
console.log(`${self.firstname} kennt ${friend.firstname}`);
});
}
}
Listing 4–11 Zusätzlicher Code durch die Verwendung herkömmlicher Callback-Funktionen
Dieser
