# TypeScript Generics: So erstellen Sie wiederverwendbare Codevorlagen TypeScript Generics werden genutzt, um wiederverwendbaren und typsicheren Code zu generieren. Das System lässt sich unter anderem auf Funktionen, Klassen, Schnittstellen und Typen anwenden. ## Was sind TypeScript Generics? In beinahe jeder [Programmiersprache](https://www.ionos.at/digitalguide/websites/web-entwicklung/welche-programmiersprache-lernen/) gibt es Tools, mit denen Nutzerinnen und Nutzer **Codevorlagen erstellen** können, die sich dann im späteren Verlauf oder bei weiteren Projekten wiederverwenden lassen. Ziel ist es dabei nicht nur, Zeit zu sparen, sondern auch sicheren Code zu erstellen, der sich nahtlos in neue Umgebungen einfügen lässt. Unterschiedliche Komponenten, Funktionen und komplette Datenstrukturen lassen sich auf diese Weise schreiben und replizieren, **ohne dass sie dabei ihre Typsicherheit verlieren**. In [TypeScript](https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript/) werden diese Aufgaben mit Generics durchgeführt. Typen können dadurch als Parameter an andere Typen, Funktionen oder weitere Datenstrukturen weitergegeben werden. ## Syntax und Funktionsweise anhand eines einfachen Beispiels Die Basis für die Arbeit mit TypeScript Generics sind **generische Variablen**. Diese funktionieren als eine Art Platzhalter und geben den Datentyp an, der zu einem späteren Zeitpunkt deklariert werden soll. Im Code kennzeichnet man sie mit einem beliebigen Großbuchstaben. Bei der Codeerstellung werden diese Variablen **in spitze Klammern eingefasst**. Man weist ihnen den tatsächlichen Typnamen zu, sodass anstelle des Platzhalters die gewünschte [TypeScript-Funktion](https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript-functions/), Schnittstelle oder [TypeScript-Klasse](https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript-classes/) rückt. Diesen Platzhalter bezeichnet man auch als **Type-Parameter**. Es ist auch möglich, mehrere dieser Type-Parameter innerhalb einer Klammer zu platzieren. Die Syntax von TypeScript Generics erkennen Sie an diesem einfachen Beispiel: ```typescript function Beispielfunktion(parameter1: T): void { console.log(`Der Datentyp des Parameters ${parameter1} ist: ${typeof parameter1}`) } ``` Hierbei nutzen wir den Namen der Funktion („Beispielfunktion“), um die generische Variable „T“ zu definieren. Im folgenden Code deklarieren wir diese Variable als String: ```typescript Beispielfunktion("Hier steht ein String."); ``` Übergeben wir nun den Parameterwert `string` an die Funktion, erhalten wir die folgende Ausgabe: ```typescript Der Datentyp des Parameters Hier steht ein String. ist: string ``` ## TypeScript Generics mit zwei Variablen Ganz ähnlich funktionieren TypeScript Generics, wenn **zwei oder mehr generische Variablen** als Platzhalter eingesetzt werden. Im folgenden Beispiel hinterlegen wir die Variablen „T“ und „U“ als Typen für die Parameter „parameter1“ und „parameter2“. Sie werden dabei durch ein Komma voneinander abgetrennt: ```typescript function Beispielfunktion(parameter1: T, parameter2: U): string { return JSON.stringify({parameter1, parameter2}); } ``` Nun weisen wir den beiden Platzhaltern Datentypen und Werte zu. In diesem Fall die Datentypen `number` und `string` sowie die Werte „11“ und „Spieler“. Dies ist der passende Code: ```typescript const str = Beispielfunktion(11, "Spieler"); console.log(str); ``` ## Beispiele für reproduzierbare Klassen Möchten Sie TypeScript Generics anwenden, um **reproduzierbare 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: ```typescript class Zahlenwert { 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('meineZahl'); value.setValue(11); console.log(value.toString()); ``` Dadurch erhalten Sie die folgende Ausgabe: ```typescript meineZahl: 11 ``` Das Prinzip funktioniert natürlich auch mit anderen Datentypen und mehreren generischen Variablen. Das können Sie im folgenden Beispiel sehen: ```typescript class Beispielklasse { 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 vorgesehenen Werte zu: ```typescript const person1 = new Beispielklasse("Julia", "Schulz"); console.log(`${person1.vorname} ${person1.nachname}`) ``` Dieses Mal erhalten wir die folgende Ausgabe: ```typescript Julia Schulz ``` Möchten Sie unterschiedliche Datentypen kombinieren, gehen Sie wie im folgenden Beispiel vor: ```typescript class Beispielklasse { zahl: T; wort: U; constructor(zahl: T, wort: U) { this.zahl = zahl; this.wort = wort; } } ``` Die Platzhalter bekommen nun die Datentypen `number` und `string` sowie ihre Werte zugewiesen: ```typescript const kombination = new Beispielklasse(11, "Spieler"); console.log(`${kombination.zahl} ${kombination.wort}`); ``` Dies ist die Ausgabe: ```typescript 11 Spieler ``` ## Einsatz mit Interfaces Auch für **Schnittstellen** ist der Einsatz von TypeScript Generics möglich und sogar empfehlenswert. Das Vorgehen ähnelt der Deklarierung einer Klasse: ```typescript interface Schnittstelle { wert: T; } ``` Nun implementieren wir die Schnittstelle in die Klasse „Beispielklasse“. Dabei weisen wir der Variablen „T“ den Datentyp `string` zu: ```typescript class Beispielklasse implements Schnittstelle { wert: string = "Dies ist ein Beispiel mit einem Interface"; } const ausgabe = new Beispielklasse(); console.log(ausgabe.wert) ``` Unsere Ausgabe sieht dadurch aus wie folgt: ```typescript Dies ist ein Beispiel mit einem Interface ``` ## Generische Arrays erstellen Für [TypeScript Arrays](https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript-arrays/) ist der Einsatz der TypeScript Generics ebenfalls möglich. Hier ein einfaches Codebeispiel, bei dem wir die Funktion `reverse` nutzen, um die Zahlenreihung eines Arrays umzudrehen: ```typescript function reverse(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: ```typescript [9, 13, 6, 7, 10] ``` ## TypeScript Generics für bedingte Typen Abschließend zeigen wir Ihnen noch, wie Sie mit TypeScript 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 Voraussetzung der Datentyp `string` sein. Dies ist der Code: ```typescript type IstDiesEinString = T extends string ? true : false; type A = "beispiel"; type B = { name: string; }; type ErstesResultat = IstDiesEinString; type ZweitesResultat = IstDiesEinString; ``` `type A` ist also der String „beispiel“, während `type B` ein Objekt mit der Eigenschaft „name“ und dem Datentyp `string` ist. Diese beiden Typen hinterlegen wir dann als „ErstesResultat“ und „ZweitesResultat“. Überprüfen wir anschließend die beiden Types, werden wir feststellen, dass „ErstesResultat“ als String den Wert `true` erhält, während „ZweitesResultat“ `false` bleibt. Tipp Deployment direkt via GitHub: [Deploy Now](https://www.ionos.at/hosting/deploy-now "Deploy Now von IONOS") von IONOS ist dank automatischer Framework-Erkennung, einem schnellen Setup und optimaler Skalierbarkeit die beste Wahl für Websites und Apps gleichermaßen. Wählen Sie den passenden Tarif für Ihr Projekt! This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript-generics/](https://www.ionos.at/digitalguide/websites/web-entwicklung/typescript-generics/) for AI/LLM consumption.