TypeScript : les fonctions comme paramètres avec typage strict — analyse complète

TypeScript : les fonctions comme paramètres avec typage strict — analyse complète avec exemples

Bonjour, collègue ! Si tu as déjà écrit en JavaScript et passé une fonction à une autre fonction (par exemple, dans setTimeout ou Array.map), tu connais déjà le concept de fonctions d'ordre supérieur. Mais quand il s'agit de TypeScript, une question logique se pose : "Peut-on typer strictement une fonction que l'on passe en paramètre ?". La réponse est oui, et c'est l'une des fonctionnalités les plus puissantes du langage.

Dans cet article, nous allons voir comment déclarer des types de fonctions en TypeScript, comment les passer en arguments et comment ne pas se tromper avec les signatures. Tu apprendras à rendre ton code non seulement sûr, mais aussi auto-documenté. C'est parti !

D'ailleurs, cette question est l'une des plus populaires sur Stack Overflow (des milliers de vues). Donc si tu veux comprendre une fois pour toutes, tu es au bon endroit.

Pourquoi c'est important : le typage strict fait gagner du temps

Imagine que tu écris une fonction qui prend une autre fonction (callback). Sans types, tu pourrais accidentellement passer une fonction avec un mauvais nombre d'arguments ou une valeur de retour incorrecte. TypeScript détecte ces erreurs à la compilation, pas à l'exécution. C'est comme une assurance pour ton code.

Voici un exemple qui ne fonctionnera pas sans types :

// JavaScript (sans types) — l'erreur n'apparaîtra qu'à l'exécution\nfunction processData(callback) {\n    const result = callback(10, 20);\n    console.log(result);\n}\n\n// Oups, on a passé une fonction avec un seul paramètre\nprocessData((x) => x * 2); // NaN — car le deuxième paramètre est undefined

Avec TypeScript, on peut indiquer explicitement la signature attendue du callback :

// TypeScript — erreur à la compilation\nfunction processData(callback: (a: number, b: number) => number): void {\n    const result = callback(10, 20);\n    console.log(result);\n}\n\n// ✅ Correct\nprocessData((x, y) => x + y); // 30\n\n// ❌ Erreur : Le type '(x: number) => number' n'est pas assignable au type '(a: number, b: number) => number'\n// processData((x) => x * 2);

Génial, non ? Maintenant, voyons toutes les façons de déclarer ces types.

Méthode 1 : Signature en ligne (la plus simple)

La manière la plus directe est d'indiquer la signature de la fonction directement dans les paramètres. C'est pratique quand la fonction paramètre n'est utilisée qu'une seule fois.

// Fonction qui prend une autre fonction avec deux nombres et retourne une chaîne\nfunction formatNumbers(\n    a: number,\n    b: number,\n    formatter: (x: number, y: number) => string\n): string {\n    return formatter(a, b);\n}\n\n// Utilisation\nconst result = formatNumbers(5, 10, (x, y) => `Somme : ${x + y}`);\nconsole.log(result); // "Somme : 15"

Avantages : rapide, clair.
\nInconvénients : si la signature se répète, il faudra dupliquer le code.

Méthode 2 : Alias de type pour la fonction (réutilisable)

Si tu utilises la même signature à plusieurs endroits, il est préférable de la définir dans un alias de type. Cela rend le code plus propre et plus facile à maintenir.

// Déclaration du type de fonction\ntype Callback = (error: Error | null, data: string) => void;\n\n// Fonction qui prend un Callback\nfunction fetchData(url: string, callback: Callback): void {\n    // Simulation d'une requête asynchrone\n    setTimeout(() => {\n        if (url) {\n            callback(null, "Données reçues");\n        } else {\n            callback(new Error("URL vide"), "");\n        }\n    }, 1000);\n}\n\n// Utilisation\nfetchData("/api/data", (err, data) => {\n    if (err) {\n        console.error("Erreur :", err.message);\n    } else {\n        console.log("Succès :", data);\n    }\n});

Remarque : nous avons utilisé void comme type de retour. Cela signifie que la fonction peut ne rien retourner