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

Im Gegensatz zu Interfaces können Klassen neben Eigenschaften auch Funktionen für die beschriebenen Objekte festlegen. Hierbei ist ebenfalls von Methoden die Rede. Ein Beispiel dafür findet sich in Beispiel 2-3. Es definiert eine Klasse Flight Manager zum Verwalten von Flügen.

Beispiel 2-3: Klasse zum Verwalten von Flügen

// src/app/ts/flight-manager.ts

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

export class FlightManager {

private cache: Flight[];

constructor(cache: Flight[]) {

this.cache = cache;

}

search(from: string, to: string): Flight[] {

const result = new Array<Flight>();

for (let f of this.cache) {

if (f.from === from && f.to === to) {

result.push(f);

}

}

return result;

}

}

Neben den aus anderen Sprachen bekannten Operatoren == und != zum Vergleichen von Werten bieten JavaScript und somit TypeScript auch die Operatoren === und !==. Letztere beziehen den Datentyp ebenfalls in die Gleichheitsprüfung ein: const b1 = '1' == 1; // true const b2 = '2' === 2; // false Generell sind deswegen === und !== zu bevorzugen.

Diese Klasse weist eine Eigenschaft cache auf, die vom Typ Flight-Array (Flight[]) ist und somit mehrere Flüge aufnehmen kann.

Der Konstruktor ist eine Methode, die TypeScript beim Erzeugen von Objekten dieser Klasse aufruft. Er nimmt einen Initialwert für den Cache entgegen. Auf das Feld cache greift er über das Schlüsselwort this zu, das das aktuelle Objekt repräsentiert. Anders als bei vielen ähnlichen Sprachen ist der Einsatz von this in TypeScript verpflichtend.

Die Methode search sucht anhand von übergebenen Kriterien nach Flügen im Cache und liefert ein Array mit den Treffern zurück. Dabei fällt auf, dass sie neben der Schreibweise Flight[] auch die Schreibweise Array<Flight> verwendet. Beides hat in TypeScript die gleiche Bedeutung.

Da TypeScript versucht, Typen über Schlussfolgerungen herzuleiten, könnte in Beispiel 2-3 der Rückgabewert der Methode search auch weggelassen werden. In diesem Fall würde TypeScript durch Analyse der Verwendung von return auf den Datentyp Flight[] schließen. Wer sich mit expliziten Typangaben besser fühlt, kann diese natürlich jederzeit verwenden.

Damit die Eigenschaft cache nur innerhalb der Klasse sichtbar ist, wurde sie mit dem Access-Modifier private versehen. Die Methode search hat hingegen keinen Access-Modifier und ist somit öffentlich zugänglich. Insgesamt bietet TypeScript die folgenden Access-Modifier:

public

Jeder hat Zugriff. Es handelt sich hierbei um den Standardwert, d.h., Eigenschaften ohne Access-Modifier sind immer public.

protected

Nur die Klasse selbst und davon abgeleitete Klassen dürfen zugreifen. Details zur Ableitung von Klassen finden Sie weiter unten unter »Interfaces und Vererbung« auf Seite 53.

private

Nur die Klasse selbst hat Zugriff.

readonly

Wird gemeinsam mit public, protected und private verwendet. Legt fest, dass der Wert nach seiner Initialisierung nicht mehr geändert werden darf. Die Initialisierung findet entweder durch Zuweisung eines Standardwerts statt oder im Konstruktor.

	Konstruktoren kommen häufig zum Initialisieren von Eigenschaften zum Einsatz. Im betrachteten Fall ist die Eigenschaft cache ein Beispiel dafür: private cache: Flight[]; constructor(cache: Flight[]) { this.cache = cache; }
	Dieses Fragment weist das Konstruktorargument cache der gleichnamigen privaten Eigenschaft zu. Somit kommt das Wort cache hier viermal vor. Um dieses wortreiche Unterfangen abzukürzen, bietet TypeScript ein wenig syntaktischen Zucker: constructor(private cache: Flight[]) { }
	Hierzu müssen Sie lediglich das Konstruktorargument mit einem Access-Modifier wie private oder public versehen. In diesem Fall richtet TypeScript sowohl ein Konstruktorargument als auch eine gleichnamige Eigenschaft ein und weist Ersteres Letzterem zu. Die Semantik entspricht somit der des zuvor betrachteten ausführlichen Konstrukts.

Ein Beispiel für die Nutzung der Klasse FlightService findet sich in Beispiel 2-4. Es importiert sowohl Flight als auch FlightManager und erzeugt danach mit einem Objektliteral ein Array<Flight>, das als Cache fungiert:

Beispiel 2-4: Der FlightService nimmt ein Array entgegen.

// src/app/ts/demo.ts

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

import { FlightManager } from './flight-manager';

let flights: Array<Flight> = [

{

id: 17,

from: 'Graz',

to: 'Hamburg',

date: '2022-02-27T17:00+01:00'

},

{

id: 18,

from: 'Graz',

to: 'Hamburg',

date: '2022-02-27T18:00+01:00'

},

{

id: 19,

from: 'Graz',

to: 'Mallorca',

date: '2022-02-27T19:00+01:00'

},

{

id: 20,

from: 'Graz',

to: 'Hamburg',

date: '2022-02-27T20:00+01:00'

}

];

let fm = new FlightManager(flights);

let result1 = fm.search('Graz', 'Hamburg');

for (let f of result1) {

console.debug('flight', f);

}

Mit dem Schlüsselwort new erzeugt das betrachtete Beispiel ein neues Objekt nach der Vorlage des FlightManager und übergibt dabei das Array flights an dessen Konstruktor. Anschließend sucht es mit search nach Flügen von Graz nach Hamburg und gibt das erhaltene Ergebnis aus. Dazu iteriert es das Ergebnis mit einer for-of-Schleife.