TypeScript : Types d'utilitaires

Introduction aux types d'utilitaires

Les types d'utilitaires dans TypeScript vous permettent de transformer des types existants en nouveaux en incluant, excluant ou modifiant des propriétés. Cela peut être incroyablement utile lorsque vous devez créer des définitions de types adaptées à des cas d'utilisation spécifiques sans dupliquer le code.

Utilisation de ReturnType et Awaited dans TypeScript

Lorsque vous travaillez avec TypeScript, vous devrez souvent déterminer le type de retour d'une fonction. TypeScript fournit un type d'utilitaire pratique appelé ReturnType à cet effet. Voyons comment l'utiliser, y compris la gestion des fonctions asynchrones.

1. Obtenir le type de retour d'une fonction

Pour obtenir le type de retour d'une fonction, vous pouvez utiliser le type d'utilitaire ReturnType . Voici un exemple :

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

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

// renverra Promise

Dans cet exemple :

La fonction foo renvoie une chaîne.

ReturnType extrait le type de retour de foo, qui est string.
2. Gestion des fonctions asynchrones

Lorsqu'il s'agit de fonctions asynchrones, le type de retour est une Promesse. Voici un exemple :

tapez MyReturnType = ReturnType

Dans cet exemple :

La fonction fooWithAsync renvoie une Promise qui se résout en une chaîne.

ReturnType extrait le type de retour, qui est Promise.

3. Utilisation d'Awaited pour les fonctions asynchrones

Si vous souhaitez obtenir le type résolu de la promesse renvoyé par une fonction asynchrone, vous pouvez utiliser le type d'utilitaire Awaited . Voici comment :

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

Dans cet exemple :

ReturnType donne une promesse.

Attendu> résout la promesse en son type sous-jacent, qui est une chaîne.

Résumé :

ReturnType : Extrait le type de retour d'une fonction.
Attendu : résout le type d'une promesse.

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

En combinant ces types d'utilitaires, vous pouvez déterminer efficacement les types de retour des fonctions synchrones et asynchrones dans TypeScript.

*Extraction des types de retour avec des types conditionnels dans TypeScript
*
Dans TypeScript, vous pouvez utiliser des types conditionnels et l'inférence de type pour extraire dynamiquement le type de retour d'un type de fonction. Ceci est particulièrement utile pour créer des utilitaires de type flexibles et réutilisables. Explorons comment cela fonctionne avec l'alias de type MyReturnTypeWithCondition.

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

Le décomposer

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

Cette partie vérifie si T est un type de fonction.
La syntaxe ...args : any[] correspond à n'importe quelle signature de fonction.
Le mot-clé infer R capture le type de retour de la fonction dans une variable de type R.

Résultat : ? R : jamais

Si T est un type de fonction, l'alias de type se résout en R, le type de retour de la fonction.
Si T n'est pas un type de fonction, il est résolu comme jamais.
Exemple pratique

Considérez l'exemple suivant pour voir cela en action :

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

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

Dans l'exemple ci-dessus, ReturnType sera booléen car
Exemple de fonction est un type de fonction qui renvoie un booléen. Si vous utilisez un type non fonctionnel, ReturnType ne le sera jamais.

Cette approche vous permet de créer des utilitaires de types hautement adaptables qui peuvent déduire et manipuler des types en fonction de leur structure. Il s'agit d'une fonctionnalité puissante de TypeScript qui améliore la sécurité des types et la maintenabilité du code.

Combiner et embellir des types dans TypeScript

Lorsque vous travaillez avec TypeScript, vous devez souvent combiner plusieurs types ou interfaces pour créer des structures plus complexes. Cela peut parfois donner lieu à des types difficiles à lire et à gérer. Ce document explorera comment combiner deux types, rendre les types imbriqués plus jolis et vérifier si les types fusionnés sont égaux.

1. Combiner deux types

Combiner deux types dans TypeScript est une tâche courante. Vous pouvez y parvenir en utilisant les types d'intersection (&). Supposons que vous disposiez de deux interfaces, OfferSummaryWithoutConfig et OfferTypeConfiguration, et que vous souhaitiez les combiner.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

Vous pouvez combiner ces deux interfaces en utilisant le type d'intersection (&) :

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

Cela crée un nouveau type qui inclut toutes les propriétés de OfferSummaryWithoutConfig et OfferTypeConfiguration.

2. Jolir les types imbriqués

Lorsque vous fusionnez des types, le type résultant peut parfois sembler désordonné et difficile à lire. Pour rendre ces types plus lisibles, vous pouvez utiliser un type d'utilitaire appelé Prettify.

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

Ce type d'utilitaire parcourt les clés du type T et les reconstruit, rendant la définition du type plus propre et plus facile à lire.

Après avoir combiné les types, vous pouvez utiliser le type d'utilitaire Prettify pour nettoyer le type résultant

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

3. Vérifier si les types fusionnés sont égaux

Pour vous assurer que le type fusionné correspond exactement à ce que vous attendez, vous pouvez utiliser des types utilitaires pour vérifier si deux types sont identiques, exacts ou égaux.

IsExact : Vérifie si deux types sont exactement identiques.

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

IsIdentical : utilise des types conditionnels pour comparer deux types.

tapez IsIdentical = T étend U ? (U étend T ? vrai : faux) : faux;

IsEqual : garantit que les deux types ont les mêmes clés.

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;
}

Vous pouvez utiliser ces types d'utilitaires pour vérifier si CombinedType est identique, exact ou égal à un autre type OfferSummary.

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

Exemple pratique

Rassemblons tout cela avec un exemple pratique :

type Prettify<T> = {

};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!