TypeScript Generics: Eine vollständige Anleitung

TL;DR: Mit TypeScript Generics können Entwickler wiederverwendbaren Code schreiben, der mit verschiedenen Datentypen arbeiten kann und gleichzeitig die Typsicherheit gewährleistet. Sie sind für die Erstellung robuster und skalierbarer TypeScript-Apps unerlässlich.

Um sicherzustellen, dass der Code transparent und verwaltbar ist, erfordert Typescript die sichere und effektive Verwaltung mehrerer Arten von Daten. Eine der Kernfunktionen von Typescript sind Typescript-Generika, die die Erstellung von Funktionen, Klassen und Schnittstellen unter Einhaltung strenger Typbeschränkungen ermöglichen. Mit Generika können Sie weniger Code schreiben, weniger Fehler machen und, was am wichtigsten ist, flexible Komponenten für verschiedene Datentypen erstellen.

Dieser Artikel untersucht die Grundlagen von Typoskript-Generika, einschließlich ihrer Verwendung in Funktionen, Klassen und Schnittstellen, und zeigt, wie sie Code vielseitig und robust machen.

Was sind Typescript-Generika?

Typescript-Generika können Typescript-Code mit Platzhaltertypen definieren, sodass dieser flexibel, erweiterbar und wiederverwendbar ist und gleichzeitig typsicher bleibt.

Typescript führt Typsicherheitsprüfungen während der Kompilierungszeit als Platzhalter durch, der einen generischen Typ definiert. Wenn die Komponente implementiert ist, ersetzt der tatsächliche Typ den Platzhalter. Diese Technik erleichtert die Verwaltung und Reduzierung von Duplizitäten, da Sie nicht für jeden Datentyp unterschiedliche Implementierungen benötigen.

Ohne Generika würden Sie mehrere Versionen einer Funktion oder Klasse schreiben, um unterschiedliche Datentypen zu verarbeiten, was zu Codeduplizierung führen würde. Generics ermöglichen eine einzelne Implementierung, die für verschiedene Arten wiederverwendbar ist und gleichzeitig die statische Typprüfung beibehält.

Die Codebeispiele im nächsten Abschnitt helfen Ihnen, diesen Unterschied zu verstehen.

Wann sollten Typescript-Generika verwendet werden?

Generika können in verschiedenen Teilen des Typoskripts verwendet werden, um die Verwaltung von Typen effizienter zu gestalten. Sie sind maßgeblich an Funktionen, Schnittstellen, Klassen und anderen Strukturen beteiligt, bei denen Flexibilität von entscheidender Bedeutung ist.

1. Generische Typen in Funktionen

Generika werden häufig in Funktionen eingesetzt, um Redundanz zu reduzieren. Stellen Sie sich beispielsweise eine Funktion vor, die eine Zeichenfolge oder eine Zahl als Parameter akzeptiert.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

Diese Funktion funktioniert einwandfrei. Es verwendet jedoch jeden Typ, was bedeutet, dass Typescript den Überblick über den spezifischen Typ verliert. Infolgedessen wird der Rückgabewert als any, eingegeben und Typescript kann die Typsicherheit nicht mehr erzwingen. Wenn wir die Typsicherheit wahren müssen, müssten wir zwei verschiedene Funktionen schreiben, von denen eine einen String und die andere eine Zahl zurückgibt. Allerdings erhöht dieser Ansatz die Codeduplizierung.

Wir können die obige Funktion verbessern, indem wir Generika verwenden, um Typinformationen beizubehalten.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

Das T stellt den Typ dar, den die Methode in diesem Fall verwendet. Falls vorhanden, bestätigt Typescript, dass der Eingabetyp und der Typ im Rückgabeparameter identisch sind.

Außerdem können wir die Funktion definieren, ohne den Parametertyp explizit zu definieren.

function identity<t>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string
</string></number></t>

In Typescript können Sie mehr als einen generischen Typparameter verwenden, wenn Sie mit mehreren Typen in einer einzelnen Funktion oder Komponente arbeiten. Beispielsweise möchten Sie möglicherweise eine Funktion, die zwei verschiedene Arten von Eingaben entgegennimmt und diese als Paar zurückgibt.

const result3 = identity(100); // result3: number
const result4 = identity("world"); // result4: string

In diesem Fall gibt die Funktion ein Tupel mit einem ersten Element vom Typ T und einem zweiten Element vom Typ U zurück. Dies ermöglicht die typsichere Verarbeitung von zwei unterschiedlichen Typen durch die Funktion.

2. Standardtypen im Typoskript

In Typescript können Sie einen Standardtyp für ein Generikum angeben, sodass dieser optional ist. Wenn kein Typ angegeben wird, verwendet Typescript den Standard.

function multipleParams<t u>(first: T, second: U): [T, U] {
 return [first, second];
}
const result1 = multipleParams<string number>("hello", 42); // result1: [string, number]
const result2 = multipleParams<string number>("hello", "world"); // result2: gives a type error
</string></string></t>

In diesem Beispiel ist der Typparameter T standardmäßig auf string eingestellt. Wenn der Entwickler beim Aufruf der Funktion keinen bestimmten Typ angibt, ist T standardmäßig eine Zeichenfolge.

3. Generische Schnittstellen

Typescript-Generika können auch auf Schnittstellen angewendet werden. Stellen Sie sich vor, Sie möchten eine Box-Schnittstelle mit einem Wert vom Typ beliebiger definieren.

function createArray<t string>(length: number, value: T): T[] {
 return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // T defaults to string, so stringArray is a string array
const numberArray = createArray<number>(3, 42); // T is explicitly set to a number, so numberArray is a number array
</number></t>

Dies entspricht eher dem Beispiel für generische Funktionen; Auch dieser Code funktioniert problemlos, da wir keinen bestimmten Typ definiert haben. Da der Wert jedoch als any eingegeben wird, können typbezogene Fehler auftreten.

Um den Typ zu sichern, können wir hier eine generische Schnittstelle definieren.

interface Box {
  value: any;
}
const numberBox: Box = { value: 123 }; // correct
const stringBox: Box = { value: "hello" }; // correct

Die Schnittstelle ist generisch und ihr Werttyp ist streng auf die Variable Typ beschränkt. Die Variable Typ kann beim Erstellen einer Instanz als Zahl oder Zeichenfolge angegeben werden, damit das Typescript sicherstellt, dass die entsprechenden Typen eingehalten werden.

4. Generische Klassen

Klassen können auch mit Generika geschrieben werden, um verschiedene Typen zu verarbeiten und gleichzeitig die Typsicherheit aufrechtzuerhalten. Erstellen wir eine Storage-Klasse, die Werte beliebigen Typs speichern und abrufen kann.

interface Box<type> {
  value: Type;
}
const numberBox: Box<number> = { value: 123 }; // number
const stringBox: Box<string> = { value: "hello" }; // string
const stringBox2: Box<string> = { value: 123 }; // incorrect
</string></string></number></type>

Diese Klasse funktioniert, aber da Daten vom Typ any sind, gibt die Methode getItem any zurück, und entfernt die Typsicherheit. Wir können die Klasse also mithilfe von Generika umschreiben, um die Typsicherheit zu verbessern.

class Storage {
  private data: any;
  setItem(item: any): void {
    this.data = item;
  }
  getItem(): any {
    return this.data;
  }
}
const storage = new Storage();
storage.setItem(123);
const item = storage.getItem();

In diesem Fall wird der Typ T von der Klasse Storage verwendet. Typescript stellt sicher, dass die Daten korrekt sind, wenn Sie beim Erstellen einer Instanz den Typ dafür definieren. Die Methode getItem in diesem Codebeispiel liefert eine Zahl.

5. Allgemeine Einschränkungen

Sie können generische Einschränkungen verwenden, um die Typen einzuschränken, die ein Generikum akzeptieren kann, um sicherzustellen, dass sie bestimmte Eigenschaften haben.

Wenn Sie beispielsweise eine Funktion haben, die auf die Eigenschaft length einer Eingabe zugreifen muss, können Sie eine Einschränkung verwenden, um sicherzustellen, dass nur Typen mit einer Eigenschaft length zulässig sind . Dies verhindert, dass Typescript Fehler ausgibt oder inkompatible Typen durchschlüpfen lässt.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

Hier ist der Wert T nicht mit der Eigenschaft length definiert. Um das Problem zu ignorieren, können wir eine Einschränkung hinzufügen, die angibt, dass T eine Eigenschaft length haben muss. Wir tun dies, indem wir sagen: T erweitert { Länge: Zahl }.

function identity<t>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string
</string></number></t>

Jetzt verfügt diese Funktion über die Eigenschaft Länge; Es gibt keine Fehler und wird mit der Länge der Eingabe ausgeführt.

Abschluss

Typescript-Generika ermöglichen Ihnen das Schreiben von Code, der flexibel, wiederverwertbar und typsicher ist. Mithilfe von Klassen, Methoden und Schnittstellen mit diesen Generika können Sie viele Datentypen verwalten, ohne Code wiederholen zu müssen. Generische Einschränkungen, zahlreiche Typen und Standardtypen sind einige der wichtigsten Anwendungsfälle, die wir in diesem Beitrag untersucht und gezeigt haben, wie jeder die Skalierbarkeit und Wartbarkeit von Programmen verbessern kann.

Wenn Sie Typescript-Generika verstehen, können Sie präziseren, anpassungsfähigeren und typsichereren Code schreiben und so Ihre Typescript-Anwendungen robuster machen.

Verwandte Blogs

• Webpack vs. Vite: Welcher Bundler ist der richtige für Sie?
• Micro-Frontends mit Single-Spa erstellen: Ein Leitfaden
• Beherrschen Sie asynchrones JavaScript mit RxJS
• Axios und Fetch API? Auswahl des richtigen HTTP-Clients

Das obige ist der detaillierte Inhalt vonTypeScript Generics: Eine vollständige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!