TypeScript: Dienstprogramm-Dienstprogrammtypen

Einführung in Versorgungstypen

Dienstprogrammtypen in TypeScript ermöglichen es Ihnen, vorhandene Typen in neue umzuwandeln, indem Sie Eigenschaften einschließen, ausschließen oder ändern. Dies kann unglaublich nützlich sein, wenn Sie Typdefinitionen erstellen müssen, die auf bestimmte Anwendungsfälle zugeschnitten sind, ohne Code zu duplizieren.

Verwendung von „ReturnType“ und „Awaited“ in TypeScript

Bei der Arbeit mit TypeScript müssen Sie möglicherweise häufig den Rückgabetyp einer Funktion bestimmen. TypeScript stellt für diesen Zweck einen praktischen Dienstprogrammtyp namens „ReturnType“ bereit. Sehen wir uns die Verwendung an, einschließlich der Handhabung asynchroner Funktionen.

1. Den Rückgabetyp einer Funktion ermitteln

Um den Rückgabetyp einer Funktion zu erhalten, können Sie den Dienstprogrammtyp ReturnType verwenden. Hier ist ein Beispiel:

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

// wird Promise zurückgeben

In diesem Beispiel:

Die foo Funktion gibt eine Zeichenfolge zurück.

ReturnType extrahiert den Rückgabetyp von foo, der string ist.
2. Umgang mit asynchronen Funktionen

Beim Umgang mit asynchronen Funktionen ist der Rückgabetyp ein Promise. Hier ist ein Beispiel:

Typ MyReturnType = ReturnType

In diesem Beispiel:

Die Funktion „fooWithAsync“ gibt ein Versprechen zurück, das in eine Zeichenfolge aufgelöst wird.

ReturnType extrahiert den Rückgabetyp, der Promise ist.

3. Verwendung von „Awaited“ für asynchrone Funktionen

Wenn Sie möchten, dass der aufgelöste Typ des Versprechens von einer asynchronen Funktion zurückgegeben wird, können Sie den Dienstprogrammtyp „Erwartet“ verwenden. So geht's:

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

In diesem Beispiel:

ReturnType gibt Promise.

Erwartet> Löst das Promise in seinen zugrunde liegenden Typ auf, der string ist.

Zusammenfassung:

ReturnType: Extrahiert den Rückgabetyp einer Funktion.
Erwartet: Löst den Typ eines Versprechens auf.

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

Durch die Kombination dieser Dienstprogrammtypen können Sie die Rückgabetypen sowohl synchroner als auch asynchroner Funktionen in TypeScript effektiv bestimmen.

*Extrahieren von Rückgabetypen mit bedingten Typen in TypeScript
*
In TypeScript können Sie bedingte Typen und Typinferenz verwenden, um den Rückgabetyp dynamisch aus einem Funktionstyp zu extrahieren. Dies ist besonders nützlich für die Erstellung flexibler und wiederverwendbarer Dienstprogramme. Sehen wir uns an, wie dies mit dem Typalias „MyReturnTypeWithCondition“ funktioniert.

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

Aufschlüsselung

Conditional Check: T extends (...args: any[]) => infer R

Dieser Teil prüft, ob T ein Funktionstyp ist.
Die ...args: any[] Syntax entspricht jeder Funktionssignatur.
Das Schlüsselwort „infer R“ erfasst den Rückgabetyp der Funktion in einer Typvariablen R.

Ergebnis: ? R: niemals

Wenn T ein Funktionstyp ist, wird der Typalias in R aufgelöst, dem Rückgabetyp der Funktion.
Wenn T kein Funktionstyp ist, wird es zu „nie“ aufgelöst.
Praxisbeispiel

Betrachten Sie das folgende Beispiel, um dies in Aktion zu sehen:

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

Im obigen Beispiel ist ReturnType boolesch, weil
Beispielfunktion ist ein Funktionstyp, der einen booleschen Wert zurückgibt. Wenn Sie einen Nicht-Funktionstyp verwenden, ist ReturnType nie.

Mit diesem Ansatz können Sie äußerst anpassungsfähige Typdienstprogramme erstellen, die Typen basierend auf ihrer Struktur ableiten und bearbeiten können. Es handelt sich um eine leistungsstarke Funktion von TypeScript, die die Typsicherheit und die Wartbarkeit des Codes verbessert.

Typen in TypeScript kombinieren und verschönern

Bei der Arbeit mit TypeScript müssen Sie häufig mehrere Typen oder Schnittstellen kombinieren, um komplexere Strukturen zu erstellen. Dies kann manchmal dazu führen, dass Typen schwer zu lesen und zu verwalten sind. In diesem Dokument wird untersucht, wie man zwei Typen kombiniert, verschachtelte Typen schöner macht und prüft, ob zusammengeführte Typen gleich sind.

1. Kombination zweier Typen

Das Kombinieren zweier Typen in TypeScript ist eine häufige Aufgabe. Dies können Sie mit Schnittpunkttypen (&) erreichen. Nehmen wir an, Sie haben zwei Schnittstellen, „OfferSummaryWithoutConfig“ und „OfferTypeConfiguration“, und möchten diese kombinieren.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

Sie können diese beiden Schnittstellen mit dem Schnittpunkttyp (&) kombinieren:

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

Dadurch wird ein neuer Typ erstellt, der alle Eigenschaften von „OfferSummaryWithoutConfig“ und „OfferTypeConfiguration“ enthält.

2. Verschachtelte Typen verschönern

Wenn Sie Typen zusammenführen, kann der resultierende Typ manchmal unordentlich und schwer lesbar aussehen. Um diese Typen besser lesbar zu machen, können Sie einen Dienstprogrammtyp namens „Prettify“ verwenden.

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

Dieser Dienstprogrammtyp iteriert über die Schlüssel des Typs T und rekonstruiert sie, wodurch die Typdefinition sauberer und leichter lesbar wird.

Nachdem Sie die Typen kombiniert haben, können Sie den resultierenden Typ mit dem Dienstprogramm „Prettify“ bereinigen

Conditional Check: T extends (...args: any[]) => infer R

3. Überprüfen, ob zusammengeführte Typen gleich sind

Um sicherzustellen, dass der zusammengeführte Typ genau Ihren Erwartungen entspricht, können Sie Dienstprogrammtypen verwenden, um zu überprüfen, ob zwei Typen identisch, genau oder gleich sind.

IsExact: Prüft, ob zwei Typen genau gleich sind.

type ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

IsIdentical: Verwendet bedingte Typen, um zwei Typen zu vergleichen.

Typ IsIdentical = T erweitert U ? (U erweitert T ? true : false) : false;

IsEqual: Stellt sicher, dass beide Typen die gleichen Schlüssel haben.

export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

Mit diesen Dienstprogrammtypen können Sie prüfen, ob „CombinedType“ mit einem anderen Typ „OfferSummary“ identisch, exakt oder gleich ist.

type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

Praxisbeispiel

Lassen Sie uns alles anhand eines praktischen Beispiels zusammenfassen:

type Prettify<T> = {

};

Das obige ist der detaillierte Inhalt vonTypeScript: Dienstprogramm-Dienstprogrammtypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!