TypeScript-Generika mit Beispielen

TypeScript-Generika sind eine leistungsstarke Funktion, mit der Sie wiederverwendbare und typsichere Komponenten erstellen können. Generika bieten eine Möglichkeit, Klassen, Funktionen und Schnittstellen zu erstellen, die mit einer Vielzahl von Typen funktionieren und gleichzeitig eine hohe Typsicherheit gewährleisten. Dieser Artikel stellt Ihnen Generika vor und zeigt anhand praktischer Beispiele, wie Sie sie verwenden.

Generika verstehen

Mit Generika können Sie eine Komponente mit einem Platzhalter für den Typ definieren, mit dem sie arbeitet. Anstatt einen konkreten Typ anzugeben, verwenden Sie einen generischen Typparameter, der bei Verwendung der Komponente durch einen beliebigen Typ ersetzt werden kann.

Grundlegende Syntax

Die grundlegende Syntax zum Definieren eines generischen Typs besteht in der Verwendung von spitzen Klammern <> mit einem Typparameternamen. Hier ist ein einfaches Beispiel:

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

In diesem Beispiel ist identity eine generische Funktion, die einen Parameter value vom Typ T annimmt und einen Wert desselben Typs zurückgibt. Der Typparameter T wird beim Aufruf der Funktion durch den tatsächlichen Typ ersetzt.

Generika mit Klassen

Generika können auch mit Klassen verwendet werden, um flexible und wiederverwendbare Datenstrukturen zu erstellen. Hier ist ein Beispiel für eine generische Klasse:

class Box {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

In diesem Beispiel wird die Klasse Box mit einem generischen Typparameter T definiert. Die Klasse hat eine private Eigenschaft value vom Typ T und eine Methode getValue, die den Wert vom Typ T zurückgibt.

Generika mit Schnittstellen

Generics können mit Schnittstellen verwendet werden, um flexible und typsichere Schnittstellen zu erstellen. Hier ist ein Beispiel:

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

In diesem Beispiel wird die Schnittstelle Pair mit zwei generischen Typparametern T und U definiert. Die Schnittstelle stellt ein Wertepaar mit den Typen T bzw. U dar.

Generika in Funktionen

Generische Funktionen können in Funktionen verwendet werden, um mehrere Typen zu verarbeiten und gleichzeitig die Typensicherheit aufrechtzuerhalten. Hier ist ein Beispiel für eine generische Funktion, die mit Arrays arbeitet:

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

In diesem Beispiel verwendet die Funktion reverseArray ein Array vom Typ T und gibt ein umgekehrtes Array desselben Typs zurück. Der Typparameter T stellt sicher, dass die Funktion mit Arrays beliebigen Typs funktioniert und dabei die Typsicherheit gewahrt bleibt.

Einschränkungen für Generika

Manchmal müssen Sie dem generischen Typparameter Einschränkungen auferlegen, um sicherzustellen, dass er bestimmte Eigenschaften hat. Dies geschieht mithilfe von Einschränkungen:

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

In diesem Beispiel ist die Funktion logLength auf Typen beschränkt, die eine length-Eigenschaft haben. Dadurch kann die Funktion Zeichenfolgen und Arrays akzeptieren, jedoch keine Zahlen oder andere Typen ohne eine length-Eigenschaft.

Abschluss

Generics in TypeScript bieten eine leistungsstarke Möglichkeit, flexible und wiederverwendbare Komponenten zu erstellen und gleichzeitig eine hohe Typsicherheit beizubehalten. Wenn Sie Generics verstehen und verwenden, können Sie generischeren und anpassbareren Code schreiben und so die Gesamtqualität und Wartbarkeit Ihrer TypeScript-Anwendungen verbessern.

Experimentieren Sie in Ihren Projekten mit Generika, um deren Vorteile in der Praxis zu erleben und Ihre TypeScript-Programmierkenntnisse zu verbessern.