Читать книгу Angular - Manfred Steyer - Страница 33

Objekte sind ein zentrales Element in JavaScript und in TypeScript, aber auch in Angular. Die meisten Konzepte lassen sich durch Objekte beschreiben. Beispiele dafür sind Daten vom Server, Formulare und Eingabefelder oder Services mit wiederverwendbaren Programmteilen.

Eine einfache Möglichkeit, um die Struktur von Objekten festzulegen, ist die Nutzung von Interfaces. Sie definieren die benötigten Felder samt ihren Datentypen. Zur Veranschaulichung definiert Beispiel 2-1 ein Interface für Flüge.

Beispiel 2-1: Interface für einen Flug

// src/app/flight.ts

export interface Flight {

id: number;

from: string;

to: string;

date: string;

delayed?: boolean;

}

Dieses erste einfache Interface gibt lediglich Eigenschaften vor. Bitte beachten Sie das Fragezeichen hinter delayed. Es legt fest, dass diese Eigenschaft optional ist. Der Abschnitt »Interfaces und Vererbung« auf Seite 53 zeigt darüber auch Interfaces, die Methoden vorgeben.

Wie der Kommentar am Beginn des Listings andeutet, wurde das betrachtete Interface in einer Datei src/app/flight.ts eingerichtet. Das ist insofern von Bedeutung, als ab ECMAScript 2015 jede Datei ein eigenes Modul darstellt. Dieses Modul ist von anderen Modulen abgeschottet und hat seinen eigenen Namensraum. Das bedeutet, dass alles, was eine Datei definiert, zunächst nur innerhalb dieser Datei existiert. Das beugt Namenskonflikten vor, zum Beispiel in Fällen, in denen mehrere Dateien etwas mit dem Namen Flight definieren.

Beachten Sie, dass wir die Datei flight.ts unter src/app/ und nicht wie die anderen Dateien dieses Kapitels unter src/app/ts ablegen. Der Grund dahinter ist, dass wir diese Datei in fast allen Kapiteln dieses Buchs verwenden und deswegen einen allgemeineren Ordner dafür definieren wollten.

Um anderen Modulen Konstrukte wie Interfaces, Klassen oder auch nur Variablen zur Verfügung zu stellen, kommt das Schlüsselwort export zum Einsatz. Solche Konstrukte können in anderen Dateien bei Bedarf importiert werden. Ein Beispiel dafür findet sich in Beispiel 2-2.

Beispiel 2-2: Flugobjekt erzeugen

// src/app/ts/demo.ts

import { Flight } from '../flight';

[...]

const flight: Flight = {

id: 1,

from: 'Graz',

to: 'Hamburg',

date: '2018-12-24T17:00:00.0001:00'

}

flight.from = 'GRZ';

flight.to = 'HAM';

console.debug('from', flight.from);

console.debug('flight', flight);

	ECMAScript sowie TypeScript bieten eine vereinfachte Schreibweise für Fälle, in denen Sie eine Variable einer gleichnamigen Objekteigenschaft zuweisen wollen. Beispielsweise lässt sich anstatt const id = 1; const from = 'Graz'; const to = 'Hamburg'; const date = '2018-12-24T17:00:00.0001:00'; const flight: Flight = { id: id, from: from, to: to, date: date };
	auch die folgende Form verwenden: const id = 1; const from = 'Graz'; const to = 'Hamburg'; const date = '2018-12-24T17:00:00.0001:00'; const flight: Flight = { id, from, to, date };

Wir können zum Ausprobieren der einzelnen Sprachelemente die bestehende Datei demo.ts erweitern. Um den Code aus den anderen Beispielen nicht wiederholen zu müssen, nutzen wir das Auslassungszeichen [...].

Es handelt sich dabei um die Datei src/app/ts/demo.ts, die in der ersten Zeile das Flight-Interface aus der Datei flight.ts importiert. Den Dateinamen der flight.ts gibt es dazu relativ an, und eine Dateiendung lässt es ganz bewusst weg. Das ist auch gut so, denn das, was beim Kompilieren eine .ts-Datei ist, wird bei der Ausführung eine eigene .js-Datei oder sogar nur ein kleiner Teil eines JavaScript-Bundles sein.

Bitte beachten Sie auch, dass import-Anweisungen typischerweise am Anfang der Datei stehen.

Das betrachtete Beispiel definiert eine Variable vom Typ Flight und weist mit einem sogenannten Objektliteral ein neues Objekt zu. Der TypeScript-Compiler stellt hier sicher, dass sämtliche Vorgaben des Interface berücksichtigt sind. Das Weglassen einer der vier vorgegebenen Eigenschaften würde somit zu einem Fehler führen.

Eine etwas genauere Betrachtung verlangt die Eigenschaft date. Sie erhält einen String mit einem ISO-Datum. JavaScript hat zwar auch eine Klasse Date, um Datumswerte mit einem Objekt zu beschreiben, aber diese Klasse lässt sich nicht per JSON zwischen Server und Client übertragen. Das JSON-Format sieht dafür schlicht und ergreifend keine Repräsentation vor. Deswegen hat sich die Community auf die Nutzung von Strings mit dem ISO-Format geeinigt, das sowohl ein Datum und eine Uhrzeit als auch ein Zeitzonenoffset beinhalten kann. Das Offset wird hier durch die Endung +01:00 für die mitteleuropäische Winterzeit ausgedrückt.