Ty­pe­Script Generics: So erstellen Sie wie­der­ver­wend­ba­re Code­vor­la­gen

Ty­pe­Script Generics werden genutzt, um wie­der­ver­wend­ba­ren und typ­si­che­ren Code zu ge­ne­rie­ren. Das System lässt sich unter anderem auf Funk­tio­nen, Klassen, Schnitt­stel­len und Typen anwenden.

Was sind Ty­pe­Script Generics?

In beinahe jeder Pro­gram­mier­spra­che gibt es Tools, mit denen Nut­ze­rin­nen und Nutzer Code­vor­la­gen erstellen können, die sich dann im späteren Verlauf oder bei weiteren Projekten wie­der­ver­wen­den lassen. Ziel ist es dabei nicht nur, Zeit zu sparen, sondern auch sicheren Code zu erstellen, der sich nahtlos in neue Um­ge­bun­gen einfügen lässt. Un­ter­schied­li­che Kom­po­nen­ten, Funk­tio­nen und komplette Da­ten­struk­tu­ren lassen sich auf diese Weise schreiben und re­pli­zie­ren, ohne dass sie dabei ihre Typ­si­cher­heit verlieren. In Ty­pe­Script werden diese Aufgaben mit Generics durch­ge­führt. Typen können dadurch als Parameter an andere Typen, Funk­tio­nen oder weitere Da­ten­struk­tu­ren wei­ter­ge­ge­ben werden.

Syntax und Funk­ti­ons­wei­se anhand eines einfachen Beispiels

Die Basis für die Arbeit mit Ty­pe­Script Generics sind ge­ne­ri­sche Variablen. Diese funk­tio­nie­ren als eine Art Platz­hal­ter und geben den Datentyp an, der zu einem späteren Zeitpunkt de­kla­riert werden soll. Im Code kenn­zeich­net man sie mit einem be­lie­bi­gen Groß­buch­sta­ben. Bei der Code­er­stel­lung werden diese Variablen in spitze Klammern ein­ge­fasst. Man weist ihnen den tat­säch­li­chen Typnamen zu, sodass anstelle des Platz­hal­ters die ge­wünsch­te Ty­pe­Script-Funktion, Schnitt­stel­le oder Ty­pe­Script-Klasse rückt. Diesen Platz­hal­ter be­zeich­net man auch als Type-Parameter. Es ist auch möglich, mehrere dieser Type-Parameter innerhalb einer Klammer zu plat­zie­ren. Die Syntax von Ty­pe­Script Generics erkennen Sie an diesem einfachen Beispiel:

function Beispielfunktion<T>(parameter1: T): void {
    console.log(`Der Datentyp des Parameters ${parameter1} ist: ${typeof parameter1}`)
}

Hierbei nutzen wir den Namen der Funktion („Bei­spiel­funk­ti­on“), um die ge­ne­ri­sche Variable „T“ zu de­fi­nie­ren. Im folgenden Code de­kla­rie­ren wir diese Variable als String:

Beispielfunktion<string>("Hier steht ein String.");

Übergeben wir nun den Pa­ra­me­ter­wert string an die Funktion, erhalten wir die folgende Ausgabe:

Der Datentyp des Parameters Hier steht ein String. ist: string

Ty­pe­Script Generics mit zwei Variablen

Ganz ähnlich funk­tio­nie­ren Ty­pe­Script Generics, wenn zwei oder mehr ge­ne­ri­sche Variablen als Platz­hal­ter ein­ge­setzt werden. Im folgenden Beispiel hin­ter­le­gen wir die Variablen „T“ und „U“ als Typen für die Parameter „parameter1“ und „parameter2“. Sie werden dabei durch ein Komma von­ein­an­der ab­ge­trennt:

function Beispielfunktion<T, U>(parameter1: T, parameter2: U): string {
    return JSON.stringify({parameter1, parameter2});
}

Nun weisen wir den beiden Platz­hal­tern Da­ten­ty­pen und Werte zu. In diesem Fall die Da­ten­ty­pen number und string sowie die Werte „11“ und „Spieler“. Dies ist der passende Code:

const str = Beispielfunktion<number, string>(11, "Spieler");
console.log(str);

Beispiele für re­pro­du­zier­ba­re Klassen

Möchten Sie Ty­pe­Script Generics anwenden, um re­pro­du­zier­ba­re Klassen zu erstellen, ist auch dies möglich. Im folgenden Beispiel nutzen wir Generics, um uns eine Zahl ausgeben zu lassen. Dies ist der passende Code:

class Zahlenwert<T> {
    private _value: T | undefined;
    constructor(private name: string) {}
    public setValue(value: T) {
        this._value = value;
    }
    public getValue(): T | undefined {
        return this._value;
    }
    public toString(): string {
        return `${this.name}: ${this._value}`;
    }
}
let value = new Zahlenwert<number>('meineZahl');
value.setValue(11);
console.log(value.toString());

Dadurch erhalten Sie die folgende Ausgabe:

meineZahl: 11

Das Prinzip funk­tio­niert natürlich auch mit anderen Da­ten­ty­pen und mehreren ge­ne­ri­schen Variablen. Das können Sie im folgenden Beispiel sehen:

class Beispielklasse<T, U> {
vorname: T;
nachname: U;
constructor(vorname: T, nachname: U) {
	this.vorname = vorname;
	this.nachname = nachname;
	}
}

Nun weisen wir den Variablen jeweils den Datentyp String und die vor­ge­se­he­nen Werte zu:

const person1 = new Beispielklasse<string, string>("Julia", "Schulz");
console.log(`${person1.vorname} ${person1.nachname}`)

Dieses Mal erhalten wir die folgende Ausgabe:

Julia Schulz

Möchten Sie un­ter­schied­li­che Da­ten­ty­pen kom­bi­nie­ren, gehen Sie wie im folgenden Beispiel vor:

class Beispielklasse<T, U> {
zahl: T;
wort: U;
constructor(zahl: T, wort: U) {
	this.zahl = zahl;
	this.wort = wort;
	}
}

Die Platz­hal­ter bekommen nun die Da­ten­ty­pen number und string sowie ihre Werte zu­ge­wie­sen:

const kombination = new Beispielklasse<number, string>(11, "Spieler");
console.log(`${kombination.zahl} ${kombination.wort}`);

Dies ist die Ausgabe:

11 Spieler

Einsatz mit In­ter­faces

Auch für Schnitt­stel­len ist der Einsatz von Ty­pe­Script Generics möglich und sogar emp­feh­lens­wert. Das Vorgehen ähnelt der De­kla­rie­rung einer Klasse:

interface Schnittstelle<T> {
	wert: T;
}

Nun im­ple­men­tie­ren wir die Schnitt­stel­le in die Klasse „Bei­spiel­klas­se“. Dabei weisen wir der Variablen „T“ den Datentyp string zu:

class Beispielklasse implements Schnittstelle<string> {
	wert: string = "Dies ist ein Beispiel mit einem Interface";
}
const ausgabe = new Beispielklasse();
console.log(ausgabe.wert)

Unsere Ausgabe sieht dadurch aus wie folgt:

Dies ist ein Beispiel mit einem Interface

Ge­ne­ri­sche Arrays erstellen

Für Ty­pe­Script Arrays ist der Einsatz der Ty­pe­Script Generics ebenfalls möglich. Hier ein einfaches Code­bei­spiel, bei dem wir die Funktion reverse nutzen, um die Zah­len­rei­hung eines Arrays um­zu­dre­hen:

function reverse<T>(array: T[]): T[] {
    return array.reverse();
}
let zahlen: number[] = [10, 7, 6, 13, 9];
let neueReihung: number[] = reverse(zahlen);
console.log(neueReihung);

Wir erhalten dadurch diese Ausgabe:

[9, 13, 6, 7, 10]

Ty­pe­Script Generics für bedingte Typen

Ab­schlie­ßend zeigen wir Ihnen noch, wie Sie mit Ty­pe­Script Generics Typen mit einer Bedingung nutzen. Das Resultat ändert sich dabei, je nachdem, ob eine Bedingung erfüllt wird oder nicht. Im folgenden Beispiel soll diese Vor­aus­set­zung der Datentyp string sein. Dies ist der Code:

type IstDiesEinString<T> = T extends string ? true : false;
type A = "beispiel";
type B = {
	name: string;
};
type ErstesResultat = IstDiesEinString<A>;
type ZweitesResultat = IstDiesEinString<B>;

type A ist also der String „beispiel“, während type B ein Objekt mit der Ei­gen­schaft „name“ und dem Datentyp string ist. Diese beiden Typen hin­ter­le­gen wir dann als „Ers­tes­Re­sul­tat“ und „Zwei­tes­Re­sul­tat“. Über­prü­fen wir an­schlie­ßend die beiden Types, werden wir fest­stel­len, dass „Ers­tes­Re­sul­tat“ als String den Wert true erhält, während „Zwei­tes­Re­sul­tat“ false bleibt.