Parameters, ReturnType et Awaited : Travailler avec les types de fonctions

Q: ReturnType fonctionne-t-il avec les fonctions génériques ?

ReturnType fonctionne, mais il vous donnera le type de retour avec les génériques résolus au moment où vous prenez le type. Pour préserver la généricité, il faut utiliser des types plus avancés avec 'infer'.

Q: Comment Awaited se comporte-t-il avec des promesses imbriquées ?

Awaited est récursif et déballera toutes les couches de Promise jusqu'à obtenir une valeur non-Promise.

Après avoir manipulé les propriétés d'objets avec Partial, Required et Readonly, nous passons à la vitesse supérieure : l'extraction et la manipulation des types liés aux fonctions et aux promesses.

Publié le 17 mars 2026 • Temps de lecture : 9 min

Introduction : Pourquoi extraire des types de fonctions ?

Dans notre précédent article sur Partial, Required et Readonly, nous avons vu comment modifier les contraintes des propriétés d'un objet. Aujourd'hui, nous nous attaquons à un défi différent : comment réutiliser et manipuler les types qui décrivent le comportement de nos fonctions ?

Il arrive souvent que vous ayez besoin de :

Typher une fonction de callback avec exactement les mêmes paramètres qu'une fonction existante.
Créer une variable qui stocke le résultat d'une fonction, et donc doit avoir le même type que sa valeur de retour.
Travailler avec une promesse et vouloir accéder au type de la valeur une fois la promesse résolue, sans avoir à le déclarer manuellement.

Plutôt que de dupliquer vos interfaces ou de les inférer manuellement, TypeScript met à disposition trois utilitaires génériques : Parameters, ReturnType et Awaited. Ils permettent de "questionner" le type d'une fonction ou d'une promesse pour en extraire des informations précises.

Prérequis

Cet article est le quatrième volet de notre série sur les utilitaires TypeScript. Une bonne compréhension des Pick/Omit et de Partial/Required/Readonly est un plus, mais ces outils sont relativement indépendants.

1. Parameters<Type> : Extraire les types des paramètres

Parameters<T> construit un type à partir de T (qui doit être un type de fonction) qui représente un tuple contenant les types de tous les paramètres de cette fonction.

Syntaxe

type NouveauType = Parameters<typeof Fonction>;

Notez l'utilisation de typeof pour obtenir le type d'une fonction concrète.

Exemple simple

          function salutation(nom: string, age?: number): string {

            return `Bonjour ${nom}`;

          }

          type ParamsSalutation = Parameters<typeof salutation>;

          // ParamsSalutation = [nom: string, age?: number | undefined]

          const params: ParamsSalutation = ["Alice"]; // ✅ OK, age est optionnel

          // params = []; // ❌ Erreur : le premier paramètre (nom) est requis

Utilité concrète : wrapper une fonction et préserver ses types

Imaginez que vous vouliez créer une fonction logger qui exécute n'importe quelle fonction et loggue ses paramètres avant l'exécution.

          function avecLog<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T> {

            return function(...args: Parameters<T>) {

              console.log("Appel avec :", args);

              return fn(...args);

            };

          }

          const addition = (a: number, b: number) => a + b;

          const additionLoguée = avecLog(addition);

          const résultat = additionLoguée(3, 4); // ✅ TypeScript sait que args doivent être deux nombres

🎯 À retenir

Parameters est idéal pour créer des fonctions d'ordre supérieur (HOF), des décorateurs, ou pour typer des callbacks qui doivent correspondre exactement à la signature d'une fonction existante.

2. ReturnType<Type> : Capturer le type de retour

ReturnType<T> construit un type à partir de T (un type de fonction) qui représente le type de la valeur retournée par cette fonction.

Syntaxe

type NouveauType = ReturnType<typeof Fonction>;

Exemple simple

          function fetchUtilisateur(id: string) {

            return { id, nom: "John Doe", email: "john@mail.com" };

          }

          type UtilisateurRetour = ReturnType<typeof fetchUtilisateur>;

          // UtilisateurRetour = { id: string; nom: string; email: string; }

          let utilisateur: UtilisateurRetour;

          utilisateur = { id: "123", nom: "Alice", email: "alice@mail.com" }; // ✅

Utilité concrète : extraire le type d'une API externe ou d'une fonction complexe

C'est extrêmement pratique lorsque vous utilisez une bibliothèque ou une fonction dont le type de retour est complexe, et que vous ne voulez pas le recopier.

          import { createStore } from 'redux';

          const store = createStore(rootReducer, initialState);

          type AppStore = typeof store; // le type complet du store

          // Mais on veut le type de l'état global, retourné par store.getState()

          type RootState = ReturnType<typeof store.getState>; // 👌 Parfait !

💡 ReturnType est votre meilleur ami pour éviter la duplication de types, en particulier avec les fonctions qui retournent des objets complexes. Si vous changez la structure retournée par la fonction, tous les types qui en dépendent via ReturnType seront automatiquement mis à jour.

3. Awaited<Type> : Déballer le type d'une Promise

Awaited<T> est un utilitaire plus récent (introduit dans TypeScript 4.5) qui "déballer" le type d'une promesse. Si T est une Promise<U>, Awaited<T> sera U. Il fonctionne également de manière récursive pour les promesses imbriquées.

Syntaxe

type NouveauType = Awaited<TypePromise>;

Exemple simple

          type PromiseString = Promise<string>;

          type Résultat = Awaited<PromiseString>; // Résultat = string

          type PromiseNested = Promise<Promise<number>>;

          type RésultatNested = Awaited<PromiseNested>; // RésultatNested = number (récursif)

Utilité concrète : typer le résultat d'un appel asynchrone

Avant Awaited, pour obtenir le type résolu d'une promesse retournée par une fonction, il fallait combiner ReturnType avec une inference manuelle ou des types conditionnels. Maintenant, c'est simple et propre.

          async function fetchData() {

            const réponse = await fetch('https://api.example.com/data');

            return await réponse.json() as { id: number; value: string };

          }

          type DataPromise = ReturnType<typeof fetchData>; // Promise<{ id: number; value: string }>

          type Data = Awaited<DataPromise>; // { id: number; value: string }

          // En une seule ligne :

          type DataV2 = Awaited<ReturnType<typeof fetchData>>; // 👌

Cas d'usage : fonction utilitaire qui attend une promesse

          function handlePromise<T extends Promise<any>>(promise: T): Promise<Awaited<T>[]> {

            return promise.then(result => [result]);

          }

          const p = Promise.resolve(42);

          const handled = handlePromise(p); // Promise<number[]>

⚠️ Awaited ne se contente pas de déballer Promise. Il gère aussi les types comme PromiseLike et fonctionne de manière récursive. C'est l'outil idéal pour travailler dans un environnement asynchrone fortement typé.

Combinaisons et cas avancés

La vraie puissance de ces utilitaires apparaît quand on les combine entre eux, ou avec ceux vus précédemment.

Exemple 1 : Typer une fonction qui transforme le retour d'une autre fonction

          function mettreEnCache<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T> {

            const cache = new Map<string, ReturnType<T>>();

            return function(...args: Parameters<T>): ReturnType<T> {

              const clé = JSON.stringify(args);

              if (cache.has(clé)) {

                return cache.get(clé)!;

              }

              const résultat = fn(...args);

              cache.set(clé, résultat);

              return résultat;

            };

          }

Exemple 2 : Extraire le type résolu d'une fonction asynchrone d'une bibliothèque

          import { getUnixTime } from 'date-fns';

          import { prisma } from './prisma';

          async function getUserPosts(userId: string) {

            const user = await prisma.user.findUnique({

              where: { id: userId },

              include: { posts: true }

            });

            return user?.posts ?? [];

          }

          // Obtenir le type d'un article sans avoir à l'importer de Prisma

          type Post = Awaited<ReturnType<typeof getUserPosts>>[number];

          // Post = { id: string; title: string; ... } (type exact retourné par Prisma)

✨ La puissance de l'inférence

Ces combinaisons permettent de dériver des types complexes directement depuis vos implémentations. Plus besoin de maintenir des interfaces manuellement : laissez TypeScript faire le travail à votre place.

Scénarios réels

🔌 Création d'un système d'événements typé

          type EventMap = {

            userLoggedIn: (user: { id: string; name: string }) => void;

            dataFetched: (data: any[], timestamp: number) => void;

            error: (err: Error) => void;

          };

          class TypedEventEmitter {

            on<K extends keyof EventMap>(event: K, handler: EventMap[K]): void { ... }

            emit<K extends keyof EventMap>(event: K, ...args: Parameters<EventMap[K]>): void {

              // Ici, args est automatiquement typé selon l'événement

            }

          }

📦 Hook React personnalisé avec typage avancé

          function useFetch<T extends () => Promise<any>>(fetcher: T) {

            const [data, setData] = useState<Awaited<ReturnType<T>> | null>(null);

            const [loading, setLoading] = useState(true);

            then(setData).finally(() => setLoading(false));

            }, [fetcher]);

            return { data, loading };

          }

          // Utilisation :

          const { data } = useFetch(() => fetchUser("123")); // data est typé comme le retour de fetchUser

🔐 Validation de paramètres pour une API

          function validateAndCall<T extends (...args: any[]) => any>(fn: T, validator: (args: Parameters<T>) => boolean) {

            return function(...args: Parameters<T>): ReturnType<T> | never {

              if (validator(args)) {

                return fn(...args);

              }

              throw new Error("Validation échouée");

            };

          }

Conclusion : L'art d'inférer les fonctions

Avec Parameters, ReturnType et Awaited, vous passez maître dans l'art de manipuler les signatures de fonctions :

Parameters pour capturer et réutiliser les listes d'arguments.
ReturnType pour éviter de dupliquer des structures de retour complexes.
Awaited pour travailler sereinement avec l'asynchrone, sans se perdre dans les promesses.

Ces trois outils, combinés aux précédents (Pick, Omit, Partial, etc.), vous offrent une palette complète pour écrire un code TypeScript à la fois flexible et extrêmement sûr.

🚀 Prochaines étapes

Notre série sur les utilitaires TypeScript touche à sa fin, mais il reste des sujets passionnants :

ConstructorParameters et InstanceType : Pour travailler avec les classes et les constructeurs.
Template Literal Types : Créer des types dynamiques à partir de chaînes de caractères.
Les types conditionnels et infer : La base de tous ces utilitaires, pour ceux qui veulent comprendre la magie derrière ces outils.

💡 Le mot de la fin

Parameters, ReturnType et Awaited sont les clés pour ouvrir la boîte noire de vos fonctions. Ils vous permettent de créer des composants logiciels génériques qui s'adaptent parfaitement au code existant, sans compromis sur la sécurité des types.

👋 Un mot de l'auteur

Merci d'avoir lu ce quatrième article de la série ! J'espère que ces explications sur Parameters, ReturnType et Awaited vous donneront encore plus de contrôle sur votre code TypeScript.

Si ce contenu vous a été utile, n'hésitez pas à le partager ou à me laisser un commentaire. Votre soutien est ce qui me motive à continuer.

📢 Prochain article : "ConstructorParameters et InstanceType – Travailler avec les classes." Restez connectés !

Questions Fréquentes

Peut-on utiliser Parameters avec une fonction qui a des paramètres optionnels ?

Oui. Le tuple résultant inclura l'optionalité. Par exemple, Parameters<(a?: string) => void> donnera [a?: string].

ReturnType fonctionne-t-il avec les fonctions génériques ?

ReturnType fonctionne, mais il vous donnera le type de retour avec les génériques résolus au moment où vous prenez le type. Si vous voulez préserver la généricité, il faudra utiliser des types plus avancés (avec infer).

Comment Awaited se comporte-t-il avec des promesses imbriquées très profondément ?

Awaited est récursif et déballera toutes les couches de Promise jusqu'à obtenir une valeur non-Promise. Awaited<Promise<Promise<Promise<number>>>> donnera number.

Puis-je utiliser Parameters avec une fonction qui a plusieurs signatures (surcharges) ?

Parameters fonctionnera, mais il utilisera la dernière signature de la fonction, ou la signature d'implémentation. Pour les cas complexes, il existe des solutions plus élaborées avec les types conditionnels.

Y a-t-il une différence entre Awaited et T extends Promise ?

Conceptuellement, c'est similaire, mais Awaited est plus robuste car il gère les cas récursifs et les types PromiseLike. Il est recommandé d'utiliser Awaited pour plus de clarté et de fiabilité.

À propos de l'auteur

Je suis Abraham, développeur web & créateur de WebIntelligence. Passionné par TypeScript et la qualité du code, j'aide les développeurs à monter en compétence sur les technologies web modernes.

Me contacter