Comprendre le mot-clé d'inférence dans TypeScript

TypeScript, un sur-ensemble de JavaScript typé statiquement, a gagné en popularité dans la communauté technologique en raison de sa capacité à détecter les erreurs plus tôt et à améliorer la lisibilité du code. L'une des fonctionnalités puissantes de TypeScript est le mot-clé infer, qui permet aux développeurs d'écrire des types plus expressifs et dynamiques.

Le mot-clé de déduction

Introduit dans TypeScript 2.8, le mot-clé infer est utilisé dans les types conditionnels pour créer des variables de type temporaires. Ces variables de type peuvent ensuite être utilisées pour déduire des types dans une branche vraie ou fausse d'un type conditionnel. Le mot-clé infer permet aux développeurs d'écrire des types plus dynamiques et expressifs, car il permet à TypeScript de déterminer un type spécifique en fonction du contexte dans lequel il est utilisé.

Pour mieux comprendre le fonctionnement de l'inférence, examinons la syntaxe de base d'un type conditionnel :

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

Dans cet exemple, T est un paramètre de type générique et SomeType représente un type auquel T est comparé. Si T étend SomeType, le type de MyConditionalType sera TrueType. Sinon, ce sera FalseType.

Maintenant, introduisons le mot-clé infer dans le mix :

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

Ici, nous utilisons le mot-clé infer pour créer une variable de type temporaire U dans la vraie branche du type conditionnel. Si T étend SomeType, TypeScript tentera de déduire le type de U en fonction du type de T.

Exemples

Type de retour

ReturnType est un type d'utilitaire qui extrait le type de retour d'une fonction. C'est un exemple parfait de la façon dont le mot-clé infer peut être utilisé pour créer des types dynamiques. Voici la définition de ReturnType :

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

Dans cette définition, T est un type de fonction qui prend n'importe quel nombre d'arguments et renvoie n'importe quel type. À l'aide du mot-clé infer, nous créons une variable de type temporaire R pour représenter le type de retour de la fonction. Si T est une fonction, TypeScript déduit le type de retour et l'attribue à R.

Voyons ReturnType en action :

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

Ici, ReturnType est utilisé pour déduire le type de retour de la fonction greet, qui est une chaîne.

Paramètres

Un autre type d'utilitaire utile qui exploite le mot-clé infer est Parameters. Ce type extrait les types de paramètres d’une fonction sous forme de tuple. La définition des Paramètres est la suivante :

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

Dans cet exemple, nous créons une variable de type temporaire P pour représenter les types de paramètres de la fonction. Si T est une fonction, TypeScript déduit les types de paramètres et les affecte à P sous forme de tuple.

Regardons un exemple utilisant les paramètres :

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

Ici, Paramètres est utilisé pour déduire les types de paramètres de la fonction d'ajout, qui est un tuple [nombre, nombre].

PromiseType

Le type d'utilitaire PromiseType peut être utilisé pour extraire le type auquel une promesse est résolue. Ceci est particulièrement utile lorsqu’il s’agit de fonctions asynchrones. Voici la définition de PromiseType :

type PromiseType<t extends promise>> = T extends Promise<infer u> ? U : never;
</infer></t>

Dans cet exemple, nous créons une variable de type temporaire U pour représenter le type auquel la promesse est résolue. Si T est une promesse, TypeScript déduit le type résolu et l'attribue à U. Voici un exemple :

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

Dans ce cas, PromiseType est utilisé pour déduire le type auquel la promesse de la fonction fetchData est résolue, qui est une chaîne.

UnboxArray

Le type d'utilitaire UnboxArray peut être utilisé pour extraire le type des éléments dans un tableau. Voici la définition d'UnboxArray :

type UnboxArray<t extends array>> = T extends Array<infer u> ? U : never;
</infer></t>

Dans cet exemple, nous créons une variable de type temporaire U pour représenter le type des éléments dans le tableau. Si T est un tableau, TypeScript déduit le type d'élément et l'attribue à U. Par exemple :

type MyArray = number[];

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

Ici, UnboxArray est utilisé pour déduire le type d'éléments dans le type MyArray, qui est un nombre.

Limites

Bien que le mot-clé infer soit incroyablement puissant, il présente certaines limites :

1. Il ne peut être utilisé que dans les types conditionnels.

2. Il n'est pas toujours possible pour TypeScript de déduire le type correct, surtout lorsqu'il s'agit de types complexes ou récursifs. Dans de tels cas, les développeurs devront peut-être fournir des annotations de type supplémentaires ou refactoriser leurs types pour aider TypeScript à déduire le type correct.

Conclusion

En comprenant et en exploitant le pouvoir de l'inférence, vous pouvez créer des projets TypeScript plus flexibles. Commencez dès aujourd’hui à envisager d’incorporer le mot-clé infer dans votre boîte à outils.

Si vous avez trouvé cela utile, pensez à à vous abonner à ma newsletter pour des articles et des outils plus utiles sur le développement Web. Merci d'avoir lu !

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!