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

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

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

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

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

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!