Top erreurs des développeurs TypeScript débutants : niveau avancé

Top erreurs des développeurs TypeScript débutants : niveau avancé

TypeScript est un outil puissant qui aide à écrire un code plus sûr et plus prévisible. Cependant, le passage de JavaScript à TypeScript, surtout à un niveau avancé, s'accompagne souvent d'erreurs spécifiques. Même les développeurs familiers avec les bases du typage commettent des erreurs typiques avec les generics, les types conditionnels et les surcharges. Dans cet article, nous analyserons les 4 erreurs les plus fréquentes des débutants avancés et montrerons comment les corriger.

1. Mauvaise utilisation des Generics : perte d'information sur le type

L'une des erreurs les plus courantes est une déclaration trop large ou, au contraire, trop étroite des generics. Les développeurs spécifient souvent le type any à l'intérieur d'une fonction générique, annulant complètement les avantages de TypeScript.

Problème

// Mauvais : la fonction retourne any, on perd le typagefunction getProperty(obj: any, key: string): any {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: any

Solution

// Bon : utilisation d'un generic pour conserver le typefunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: string

Important : utilisez toujours les contraintes extends pour les generics. Cela préserve non seulement les types, mais offre également l'autocomplétion dans l'IDE.

2. Abus du type any au lieu de unknown

De nombreux développeurs débutants mettent any partout où ils ne peuvent pas déterminer immédiatement le type. Cela tue tous les avantages de TypeScript. La bonne approche est d'utiliser unknown puis de réduire le type.

Problème

// Mauvais : any permet de faire n'importe quoifunction parseData(data: any): void {    console.log(data.toUpperCase()); // Erreur à l'exécution si data est un nombre    data.someMethod(); // Aucune vérification}

Solution

// Bon : unknown nécessite une vérificationfunction parseData(data: unknown): void {    if (typeof data === 'string') {        console.log(data.toUpperCase()); // Sécurisé    } else if (Array.isArray(data)) {        console.log(data.length);    } else {        console.log('Type de données inconnu');    }}

Utilisez any uniquement en dernier recours (migration depuis JS ou travail avec des API dynamiques). Pour tout le reste, utilisez unknown avec des gardes.

3. Erreurs lors de la surcharge de fonctions (Function Overloads)

La surcharge de fonctions en TypeScript est un mécanisme puissant mais délicat. L'erreur typique : un mauvais ordre des signatures ou une non-concordance de l'implémentation avec les surcharges déclarées.

Problème

// Mauvais : les signatures se contredisentfunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    // L'implémentation ne couvre pas tous les cas    return value.toString(); // On retourne string, alors qu'on promet number pour number}

Solution

// Bon : séparation claire de la logiquefunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    if (typeof value === 'string') {        return value.toUpperCase(); // Retourne string    } else {        return value * 2; // Retourne number    }}

const result1 = process('hello'); // stringconst result2 = process(10);      // number

Conseil : vérifiez toujours que l'implémentation de la fonction couvre toutes les variantes déclarées dans les signatures. Utilisez typeof ou des gardes personnalisées.

4. Ignorer les modes stricts de com