Comment fonctionne la typage des fonctions de rappel (callback) dans TypeScript et que faut-il prévoir lors de la typage des paramètres et des valeurs de retour des callbacks ?

Réponse

Dans TypeScript, il est recommandé de décrire clairement les types pour les fonctions de rappel. La définition des types des paramètres et de la valeur de retour aide à prévenir les erreurs :

type Callback = (event: string, id: number) => boolean;

function useCallback(cb: Callback) {
  // ...
}

• Tous les paramètres et la valeur de retour doivent être explicitement typés.
• Si la fonction peut retourner void (ne retourne rien) — cela doit être indiqué : () => void.
• Les closures, this et les surcharge de fonctions doivent également être pris en compte lors de la typage.
• Si la fonction avec un callback participe à des interactions externes (par exemple, React/Node.js), les types doivent correspondre aux déclarations externes.

Question piège

Est-il obligatoire d'indiquer les types des paramètres et de la valeur de retour dans la définition de la fonction callback, si TypeScript peut les déduire automatiquement ?

Réponse : Ce n'est pas obligatoire, TypeScript sait déduire les types des arguments des callbacks, cependant pour les API publiques et les fonctions composables complexes, il est fortement conseillé d'indiquer tous les types de manière explicite. Cela facilite la maintenance et prévient les erreurs indésirables lors de la modification des contrats de fonctions.

Exemples d'erreurs réelles dues à une méconnaissance des subtilités du sujet

---

Histoire

Dans un projet, un callback a été utilisé sans typage explicite de la valeur de retour, et l'un des développeurs a commencé à retourner une chaîne au lieu de l'attendu booléen. Cela n'a pas généré d'erreur lors de la compilation à cause de any par défaut, mais la logique de la fonction s'est rompue, provoquant un bug en production.

---

Histoire

Dans un grand projet React, on a oublié de typiser explicitement les paramètres des callbacks d'événements. Lors de la mise à jour vers une nouvelle version de React, les types d'événements ont changé, et le code a commencé à compiler avec des erreurs. Il a fallu corriger d'urgence la fonction de rappel sur toutes les pages.

---

Histoire

Dans une application Node.js, un callback pour le travail avec une fonction asynchrone n'était pas typé : la valeur reçue a été erronément perçue comme une chaîne, alors qu'il s'agissait d'un objet d'erreur. L'inadéquation des types a conduit à l'impossibilité de traiter correctement les erreurs.