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

type MyReturnType = ReturnType<typeof foo>

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

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

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

• Cette partie vérifie si T est un type de fonction.
• Les ...args : any[] la syntaxe 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 :

type MyReturnType = ReturnType<typeof foo>

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. Jolis 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.

tapez Prettify = {[K dans la clé de T] : T[K]};

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

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

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.

tapez IsExact = [T] étend [U] ? ([U] étend [T] ? true : false) : false;

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.

tapez IsEqual = keyof T étend keyof U ? (keyof U étend keyof T ? true : false) : false;

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

Pour appliquer ces vérifications au moment de la compilation, vous pouvez utiliser le type Assert :

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

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

Exemple pratique

Rassemblons tout cela avec un exemple pratique :

type MyReturnType = ReturnType<typeof foo>

Conclusion

En utilisant le type d'utilitaire Prettify , vous pouvez rendre vos types imbriqués plus lisibles et plus gérables. La combinaison de types à l'aide de types d'intersection (&) vous permet de créer des structures complexes avec lesquelles il est facile de travailler. De plus, l'utilisation de types d'utilitaires tels que IsExact, IsIdentical et IsEqual permet de garantir que vos types fusionnés correspondent exactement à vos attentes.

Utilisation des types d'utilitaires TypeScript : Pick, Omit, Readonly et Partial

TypeScript propose un ensemble puissant de types d'utilitaires qui peuvent vous aider à créer des définitions de types plus flexibles et réutilisables. Nous explorerons quatre types d'utilitaires essentiels : Pick, Omit, Readonly et Partial. Nous utiliserons un exemple pratique tiré d'une application de commerce électronique pour illustrer comment ces utilitaires peuvent être appliqués dans des scénarios réels.

Commençons par une interface produit que nous utiliserons tout au long de cet article de blog :

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

Utiliser Pick pour les résumés de produits

Cas d'utilisation : affichage d'un résumé du produit sur la page de liste de produits.

Le type d'utilitaire Pick vous permet de créer un nouveau type en sélectionnant des propriétés spécifiques à partir d'un type existant. Ceci est utile lorsque vous n'avez besoin que d'un sous-ensemble de propriétés.

Exemple :

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

Utiliser Omettre pour les formulaires de produits

Cas d'utilisation : Création d'un formulaire de produit pour ajouter de nouveaux produits, où certains champs sont générés automatiquement.

Le type d'utilitaire Omettre vous permet de créer un nouveau type en excluant des propriétés spécifiques d'un type existant. Ceci est utile lorsque certaines propriétés ne sont pas nécessaires dans un contexte particulier.

Exemple :

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

Utilisation en lecture seule pour les détails immuables du produit

Cas d'utilisation : garantir que les détails du produit ne peuvent pas être modifiés après avoir été récupérés dans la base de données.

Le type d'utilitaire Readonly rend toutes les propriétés d'un type en lecture seule, ce qui signifie qu'elles ne peuvent pas être modifiées après avoir été définies. Ceci est utile pour créer des objets immuables.

Exemple :

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

Utiliser Partial pour les mises à jour de produits

Cas d'utilisation : mise à jour des détails du produit où seuls certains champs peuvent être modifiés.

Le type d'utilitaire Partiel rend toutes les propriétés d'un type facultatives. Ceci est utile lorsque vous devez créer un type pour des objets dont toutes les propriétés ne sont pas requises.

Exemple :

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

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

Conclusion

Les types d'utilitaires tels que Pick, Omit, Readonly et Partial sont des outils puissants dans TypeScript qui vous aident à créer des définitions de types plus flexibles et réutilisables. En comprenant et en utilisant ces utilitaires, vous pouvez écrire un code plus propre et plus maintenable.

N'hésitez pas à expérimenter ces types d'utilitaires dans vos propres projets et voyez comment ils peuvent simplifier vos définitions de types !

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!