ProgrammationDéveloppeur Frontend

Comment fonctionne la typage des fonctions avec REST et la déstructuration des paramètres en TypeScript ? Quelles erreurs surviennent en cas de typage incorrect de ces fonctions ?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse

TypeScript prend en charge un typage précis des fonctions en utilisant paramètres rest et déstructuration. C'est particulièrement important pour les fonctions qui acceptent un nombre variable d'arguments ou des objets complexes.

Déstructuration dans les paramètres de fonction permet de spécifier explicitement la structure des propriétés attendues :

function printUser({ name, age }: { name: string; age: number }) { console.log(`${name} (${age})`); }

Paramètres rest permettent de définir un nombre variable d'arguments et leur type :

function sum(...numbers: number[]): number { return numbers.reduce((acc, cur) => acc + cur, 0); }

L'utilisation combinée se retrouve dans des fonctions qui prennent un objet principal et un tableau supplémentaire de paramètres :

function logEvent(event: { type: string }, ...meta: any[]) { console.log(event.type, meta.join(',')); }

Un typage correct permet de détecter les erreurs avant l'exécution du code, mais un typage incorrect entraînera une perte de sécurité des types et des erreurs à l'exécution.

Question piège

Comment définir un type pour une fonction avec des paramètres déstructurés par défaut et les rendre optionnels ?

Beaucoup indiquent le type de l'objet, mais oublient de rendre chaque champ optionnel ou de définir des valeurs par défaut en même temps que le type :

function foo({x = 1, y = 2}: {x?: number; y?: number} = {}) { console.log(x, y); }

Ici, des valeurs par défaut sont définies et tous les paramètres sont rendus optionnels avec ?. Sans cela, un appel sans paramètres entraînera une erreur, même si une valeur par défaut est attendue.

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


Histoire

Dans le projet de migration des fonctions avec paramètres de JavaScript vers TypeScript, le type a été indiqué uniquement pour l'objet et non pour les champs individuels. En conséquence, l'appel de la fonction sans paramètres a conduit à un crash de l'application avec une erreur de déstructuration : undefined n'a pas de propriété name.

Histoire

Lors de l'utilisation de paramètres rest, on a oublié de spécifier explicitement le type du tableau. Dans la fonction, le type était any[], ce qui a permis de passer non seulement des nombres. En production, des nombres et des chaînes ont été additionnés, obtenant des résultats incorrects dans les rapports.

Histoire

On a utilisé la déstructuration avec un objet profondément imbriqué, mais on n'a pas spécifié les types imbriqués. À cause de cela, TS s'est "perdu" et n'a pas signalé l'absence d'un champ obligatoire dans les objets, ce qui a conduit à l'erreur TypeError : Cannot read property 'id' of undefined côté client.