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

Generics in JavaScript: Warum sie benötigt werden und wie man sie verwendet

Die moderne Entwicklung in JavaScript und Node.js erfordert nicht nur schnelles Schreiben von Code, sondern auch dessen Zuverlässigkeit. Eines der wichtigsten Werkzeuge, das Flexibilität und Typsicherheit bietet, sind Generics. In diesem Artikel werden wir uns ansehen, was Generics sind, warum sie im JavaScript-Ökosystem benötigt werden und wie man sie effektiv in der Praxis einsetzt. Das Material wird sowohl für Anfänger als auch für erfahrene Entwickler nützlich sein, die ihr Wissen vertiefen möchten.

Was sind Generics und warum werden sie benötigt?

Generics sind ein Mechanismus, der es ermöglicht, Komponenten (Funktionen, Klassen, Interfaces) zu erstellen, die mit verschiedenen Datentypen arbeiten, während eine strenge Typisierung erhalten bleibt. Im Gegensatz zu normalem JavaScript, das dynamisch typisiert ist, stammen Generics aus der Welt von TypeScript – einer Obermenge von JS, die statische Typisierung hinzufügt.

Warum wird dies benötigt? Stellen Sie sich vor, Sie schreiben eine Funktion, die das erste Element eines Arrays zurückgibt. Ohne Generics müssten Sie den Typ any verwenden, was Ihnen IDE-Hinweise vorenthält und das Risiko von Fehlern erhöht. Mit Generics können Sie universellen Code schreiben, der sicher mit Zahlen, Zeichenketten, Objekten und beliebigen anderen Typen arbeitet.

// Ohne Generics (unsicher)function getFirst(arr: any[]): any {  return arr[0];}

// Mit Generics (sicher)function getFirst<T>(arr: T[]): T | undefined {  return arr[0];}

const num = getFirst([1, 2, 3]); // Typ numberconst str = getFirst(['a', 'b']); // Typ string

Somit machen Generics den Code wiederverwendbarer und typsicherer, was besonders in großen Node.js-Projekten wichtig ist.

Wie man Generics in TypeScript (JavaScript mit Typen) verwendet

Obwohl reines JavaScript keine Generics unterstützt, integriert sich TypeScript vollständig in das Node.js-Ökosystem. Schauen wir uns die wichtigsten Anwendungsszenarien an.

1. Generische Funktionen

Der einfachste Weg ist, eine Funktion mit einem oder mehreren Typen zu parametrisieren. Dies ist nützlich für Hilfsfunktionen, die mit Sammlungen arbeiten.

// Funktion zum Zusammenführen zweier Arraysfunction mergeArrays<T>(arr1: T[], arr2: T[]): T[] {  return [...arr1, ...arr2];}

const numbers = mergeArrays([1, 2], [3, 4]); // number[]const strings = mergeArrays(['hallo'], ['welt']); // string[]

Hier ist <T> ein Typparameter, der beim Aufruf der Funktion automatisch ersetzt wird. Sie können den Typ auch explizit angeben:

const mixed = mergeArrays<number | string>([1], ['a']); // (number | string)[]

2. Generische Klassen

Generics eignen sich hervorragend zum Erstellen von Datenstrukturen wie Stapeln, Warteschlangen oder Caches.

class Stack<T> {  private items: T[] = [];

  push(item: T): void {    this.items.push(item);  }

  pop(): T | undefined {    return this.items.pop();  }

  peek(): T | undefined {    return this.items[this.items.length - 1];  }}

// Verwendungconst numberStack = new Stack<number>();numberStack.push(10);numberStack.push(20);console.log(numberStack.pop()); // 20

const stringStack = new Stack<string>();stringStack.push('TypeScript');console.log(stringStack.peek()); // 'TypeScript'

3. Typeinschränkungen

Manchmal müssen Sie einen generischen Typ auf eine bestimmte Menge von Typen einschränken. Zum Beispiel sicherstellen, dass ein Objekt eine length-Eigenschaft hat.

// Einschränken von T auf Typen, die length habenfunction logLength<T extends { length: number }>(item: T): void {  console.log(`Länge: ${item.length}`);}

logLength('Hallo'); // 5logLength([1, 2, 3]); // 3// logLength(123); // Fehler: number hat keine length

Das Schlüsselwort exten