Generics in TypeScript: vollständiger Leitfaden für Anfänger

Generics in TypeScript: Wozu sie dienen und wie man sie verwendet

TypeScript ist ein mächtiges Werkzeug, das JavaScript um statische Typisierung erweitert. Wenn Sie jedoch gerade erst anfangen, TypeScript zu lernen, sind Sie möglicherweise auf Situationen gestoßen, in Sie denselben Code für verschiedene Datentypen schreiben müssen. Genau hier kommen Generics (generische Typen) ins Spiel. In diesem Artikel werden wir untersuchen, was Generics sind, wozu sie dienen und wie man sie in der Praxis verwendet.

Was sind Generics und warum sind sie wichtig?

Generics sind ein Mechanismus in TypeScript, der es ermöglicht, Komponenten (Funktionen, Klassen, Interfaces) zu erstellen, die mit verschiedenen Datentypen arbeiten, anstatt nur mit einem bestimmten. Stellen Sie sich vor, Sie schreiben eine Funktion, die sowohl mit Zahlen, als auch mit Strings und Arrays arbeiten soll. Ohne Generics müssten Sie entweder den Typ any verwenden (was den Sinn von TypeScript zunichte macht) oder mehrere Kopien derselben Funktion erstellen.

Die Hauptvorteile von Generics:

• Typsicherheit — Sie behalten eine strenge Typisierung bei, während der Code flexibel bleibt.
• Wiederverwendbarkeit von Code — Eine Funktion oder Klasse kann mit verschiedenen Typen arbeiten.
• Lesbarkeit — Der Code wird verständlicher und selbstdokumentierend.

Grundlegende Syntax von Generics

Beginnen wir mit dem einfachsten Beispiel. Angenommen, wir brauchen eine Funktion, die das ihr übergebene Argument zurückgibt. Ohne Generics würden wir so schreiben:

function identity(arg: number): number {    return arg;}

Was aber, wenn wir einen String übergeben müssen? Dann müssten wir eine neue Funktion erstellen. Mit Generics machen wir es so:

function identity<T>(arg: T): T {    return arg;}

// Verwendung:let output1 = identity<string>("Hallo");let output2 = identity<number>(42);let output3 = identity<boolean>(true);

Hier ist <T> der Typparameter (oder die Typvariable). Wenn wir die Funktion aufrufen, setzt TypeScript automatisch den richtigen Typ ein. Sie können jeden Buchstaben verwenden: T, U, V oder sogar aussagekräftige Namen wie Type.

Übrigens kann TypeScript den Typ oft selbst ableiten, daher kann man häufig auf die explizite Angabe verzichten:

let output = identity("Hallo"); // TypeScript erkennt selbst, dass T = string ist

Arbeiten mit Arrays und mehreren Typen

Eine der häufigsten Anwendungen von Generics ist die Arbeit mit Arrays. Nehmen wir an, wir möchten eine Funktion schreiben, die ein Array entgegennimmt und das erste Element zurückgibt:

function getFirstElement<T>(arr: T[]): T | undefined {    return arr[0];}

const numbers = [1, 2, 3];const firstNumber = getFirstElement(numbers); // Typ number | undefined

const strings = ["a", "b", "c"];const firstString = getFirstElement(strings); // Typ string | undefined

Beachten Sie: Wir haben T[] verwendet – das ist dasselbe wie Array<T>. Was ist, wenn die Funktion zwei verschiedene Typen akzeptiert? Ganz einfach!

function merge<T, U>(obj1: T, obj2: U): T & U {    return { ...obj1, ...obj2 };}

const result = merge({ name: "Anna" }, { age: 25 });// result hat den Typ { name: string; } & { age: number; }// Tatsächlich: { name: string; age: number; }

Einschränkungen von Generics (Constraints)

Manchmal ist es erforderlich, dass ein Generic nicht mit jedem Typ arbeitet, sondern nur mit solchen, die bestimmte Eigenschaften besitzen. Dafür verwendet man Einschränkungen mit dem Schlüsselwort extends.

Zum Beispiel möchten wir eine Funktion schreiben, die die Länge eines Objekts ermittelt. Offensichtlich haben nicht alle Typen eine Eigenschaft length. Lassen Sie uns das überprüfen:

function getLength<T extends { length: number