Das Schlüsselwort „infer' in TypeScript verstehen

TypeScript, eine statisch typisierte Obermenge von JavaScript, hat in der Tech-Community aufgrund seiner Fähigkeit, Fehler frühzeitig zu erkennen und die Lesbarkeit des Codes zu verbessern, enorm an Popularität gewonnen. Eine der leistungsstarken Funktionen von TypeScript ist das Schlüsselwort „infer“, mit dem Entwickler ausdrucksstärkere und dynamischere Typen schreiben können.

Das Infer-Schlüsselwort

Das in TypeScript 2.8 eingeführte Schlüsselwort „infer“ wird in bedingten Typen verwendet, um temporäre Typvariablen zu erstellen. Diese Typvariablen können dann verwendet werden, um Typen innerhalb eines wahren oder falschen Zweigs eines bedingten Typs abzuleiten. Das Schlüsselwort „infer“ ermöglicht es Entwicklern, dynamischere und ausdrucksstärkere Typen zu schreiben, da es TypeScript ermöglicht, einen bestimmten Typ basierend auf dem Kontext zu bestimmen, in dem er verwendet wird.

Um besser zu verstehen, wie Infer funktioniert, werfen wir einen Blick auf die grundlegende Syntax eines bedingten Typs:

type MyConditionalType<T> = T extends SomeType ? TrueType : FalseType;

In diesem Beispiel ist T ein generischer Typparameter und SomeType stellt einen Typ dar, mit dem T verglichen wird. Wenn T SomeType erweitert, wird der Typ von MyConditionalType wird TrueType sein. Wenn nicht, ist es FalseType.

Lassen Sie uns nun das Schlüsselwort „infer“ in den Mix einführen:

type MyInferredType<T> = T extends SomeType<infer U> ? U : FalseType;

Hier verwenden wir das Schlüsselwort infer, um eine temporäre Typvariable U innerhalb des wahren Zweigs des bedingten Typs zu erstellen. Wenn T SomeType erweitert, versucht TypeScript, den Typ von U basierend auf dem Typ von T abzuleiten.

Beispiele

ReturnType

ReturnType ist ein Dienstprogrammtyp, der den Rückgabetyp einer Funktion extrahiert. Es ist ein perfektes Beispiel dafür, wie das Schlüsselwort infer zum Erstellen dynamischer Typen verwendet werden kann. Hier ist die Definition von ReturnType:

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

In dieser Definition ist T ein Funktionstyp, der eine beliebige Anzahl von Argumenten entgegennimmt und einen beliebigen Typ zurückgibt. Mit dem Schlüsselwort infer erstellen wir eine temporäre Typvariable R, um den Rückgabetyp der Funktion darzustellen. Wenn T eine Funktion ist, leitet TypeScript den Rückgabetyp ab und weist ihn R zu.

Sehen wir uns ReturnType in Aktion an:

function greet(name: string): string {
  return `Hello, ${name}!`;
}
​
type GreetReturnType = ReturnType<typeof greet>; // GreetReturnType is inferred as 'string'

Hier wird ReturnType verwendet, um den Rückgabetyp der Begrüßungsfunktion abzuleiten, bei dem es sich um einen String handelt.

Parameter

Ein weiterer nützlicher Dienstprogrammtyp, der das Schlüsselwort „infer“ nutzt, ist „Parameters“. Dieser Typ extrahiert die Parametertypen einer Funktion als Tupel. Die Definition der Parameter lautet wie folgt:

type Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;

In diesem Beispiel erstellen wir eine temporäre Typvariable P, um die Parametertypen der Funktion darzustellen. Wenn T eine Funktion ist, leitet TypeScript die Parametertypen ab und weist sie P als Tupel zu.

Sehen wir uns ein Beispiel mit Parametern an:

function add(a: number, b: number): number {
  return a + b;
}
​
type AddParameters = Parameters<typeof add>; // AddParameters is inferred as [number, number]

Hier wird Parameter verwendet, um die Parametertypen der Add-Funktion abzuleiten, bei der es sich um ein Tupel [Zahl, Zahl] handelt.

PromiseType

Der Dienstprogrammtyp PromiseType kann verwendet werden, um den Typ zu extrahieren, in den ein Promise aufgelöst wird. Dies ist besonders nützlich, wenn es um asynchrone Funktionen geht. Hier ist die Definition von PromiseType:

type PromiseType<T extends Promise<any>> = T extends Promise<infer U> ? U : never;

In diesem Beispiel erstellen wir eine temporäre Typvariable U, um den Typ darzustellen, in den das Versprechen aufgelöst wird. Wenn T ein Promise ist, leitet TypeScript den aufgelösten Typ ab und weist ihn U zu. Hier ist ein Beispiel:

async function fetchData(): Promise<string> {
  return "Fetched data";
}
​
type FetchedDataType = PromiseType<ReturnType<typeof fetchData>>; // FetchedDataType is inferred as 'string'

In diesem Fall wird PromiseType verwendet, um den Typ abzuleiten, in den das Versprechen der fetchData-Funktion aufgelöst wird, nämlich string.

UnboxArray

Der Typ des UnboxArray-Dienstprogramms kann verwendet werden, um den Typ der Elemente innerhalb eines Arrays zu extrahieren. Hier ist die Definition von UnboxArray:

type UnboxArray<T extends Array<any>> = T extends Array<infer U> ? U : never;

In diesem Beispiel erstellen wir eine temporäre Typvariable U, um den Typ der Elemente innerhalb des Arrays darzustellen. Wenn T ein Array ist, leitet TypeScript den Elementtyp ab und weist ihn U zu. Zum Beispiel:

type MyArray = number[];

type ElementType = UnboxArray<MyArray>; // ElementType is inferred as 'number'

Hier wird UnboxArray verwendet, um den Typ der Elemente innerhalb des MyArray-Typs abzuleiten, bei dem es sich um eine Zahl handelt.

Einschränkungen

Obwohl das Schlüsselwort „infer“ unglaublich leistungsfähig ist, weist es einige Einschränkungen auf:

1. Es kann nur innerhalb von bedingten Typen verwendet werden.

2. TypeScript kann nicht immer auf den richtigen Typ schließen, insbesondere wenn es um komplexe oder rekursive Typen geht. In solchen Fällen müssen Entwickler möglicherweise zusätzliche Typanmerkungen bereitstellen oder ihre Typen umgestalten, damit TypeScript den richtigen Typ ableiten kann.

Abschluss

Indem Sie die Leistungsfähigkeit von Infer verstehen und nutzen, können Sie flexiblere TypeScript-Projekte erstellen. Denken Sie noch heute darüber nach, das Schlüsselwort „infer“ in Ihr Toolkit aufzunehmen.

Wenn Sie dies hilfreich fanden, denken Sie bitte darüber nach Abonnieren Sie meinen Newsletter für weitere nützliche Artikel und Tools zur Webentwicklung. Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonDas Schlüsselwort „infer' in TypeScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!