TypeScript: 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;
} // will return Promise<?> 

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:

type MyReturnType = ReturnType<typeof foo>

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.

Awaited> 
//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

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

• 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 in nie aufgelöst.

Praxisbeispiel

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

type MyReturnType = ReturnType<typeof foo>

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.

Geben Sie Prettify = {[K in keyof T]: T[K]};

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

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

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.

Typ IsExact = [T] erweitert [U] ? ([U] erweitert [T] ? true : false) : false;

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.

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

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

Um diese Prüfungen zur Kompilierungszeit zu erzwingen, können Sie den Assert-Typ verwenden:

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

Praxisbeispiel

Lassen Sie uns alles anhand eines praktischen Beispiels zusammenfassen:

type MyReturnType = ReturnType<typeof foo>

Fazit

Durch die Verwendung des Dienstprogramms „Prettify“ können Sie Ihre verschachtelten Typen lesbarer und verwaltbarer machen. Durch die Kombination von Typen mithilfe von Schnittpunkttypen (&) können Sie komplexe Strukturen erstellen, mit denen Sie einfach arbeiten können. Darüber hinaus trägt die Verwendung von Dienstprogrammtypen wie „IsExact“, „IsIdentical“ und „IsEqual“ dazu bei, dass Ihre zusammengeführten Typen genau Ihren Erwartungen entsprechen.

Verwenden der TypeScript-Dienstprogrammtypen: Auswählen, Auslassen, Schreibgeschützt und Teilweise

TypeScript bietet einen leistungsstarken Satz Dienstprogrammtypen, mit denen Sie flexiblere und wiederverwendbarere Typdefinitionen erstellen können. Wir werden vier wesentliche Dienstprogrammtypen untersuchen: „Auswählen“, „Auslassen“, „Schreibgeschützt“ und „Teilweise“. Wir verwenden ein praktisches Beispiel aus einer E-Commerce-Anwendung, um zu veranschaulichen, wie diese Dienstprogramme in realen Szenarien angewendet werden können.

Beginnen wir mit einer Produktschnittstelle, die wir in diesem Blogbeitrag verwenden werden:

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

Auswahl für Produktzusammenfassungen verwenden

Anwendungsfall: Anzeigen einer Produktzusammenfassung auf der Produktlistenseite.

Mit dem Dienstprogramm „Typ auswählen“ können Sie einen neuen Typ erstellen, indem Sie bestimmte Eigenschaften aus einem vorhandenen Typ auswählen. Dies ist nützlich, wenn Sie nur eine Teilmenge der Eigenschaften benötigen.

Beispiel:

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:[]}

Auslassen für Produktformulare verwenden

Anwendungsfall: Erstellen eines Produktformulars zum Hinzufügen neuer Produkte, bei dem bestimmte Felder automatisch generiert werden.

Mit dem Dienstprogrammtyp „Auslassen“ können Sie einen neuen Typ erstellen, indem Sie bestimmte Eigenschaften aus einem vorhandenen Typ ausschließen. Dies ist nützlich, wenn bestimmte Eigenschaften in einem bestimmten Kontext nicht benötigt werden.

Beispiel:

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

Schreibgeschützt für unveränderliche Produktdetails verwenden

Anwendungsfall: Sicherstellen, dass Produktdetails nach dem Abruf aus der Datenbank nicht geändert werden können.

Der Dienstprogrammtyp „Readonly“ macht alle Eigenschaften eines Typs schreibgeschützt, was bedeutet, dass sie nach dem Festlegen nicht mehr geändert werden können. Dies ist nützlich, um unveränderliche Objekte zu erstellen.

Beispiel:

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

Partielle Verwendung für Produktaktualisierungen

Anwendungsfall: Aktualisierung von Produktdetails, bei der möglicherweise nur einige Felder geändert werden.

Der Dienstprogrammtyp „Partial“ macht alle Eigenschaften eines Typs optional. Dies ist nützlich, wenn Sie einen Typ für Objekte erstellen müssen, für die nicht alle Eigenschaften erforderlich sind.

Beispiel:

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

Fazit

Dienstprogrammtypen wie „Pick“, „Omit“, „Readonly“ und „Partial“ sind leistungsstarke Tools in TypeScript, mit denen Sie flexiblere und wiederverwendbarere Typdefinitionen erstellen können. Wenn Sie diese Dienstprogramme verstehen und verwenden, können Sie saubereren und wartbareren Code schreiben.

Fühlen Sie sich frei, mit diesen Dienstprogrammtypen in Ihren eigenen Projekten zu experimentieren und sehen Sie, wie sie Ihre Typdefinitionen vereinfachen können!

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