JavaScript et TypeScript

Erreur TypeScript : ‘Type ‘undefined’ is not assignable to type’ – Explications et correctifs

L’erreur Type 'undefined' is not assignable to type est l’une des erreurs les plus courantes rencontrées en TypeScript. Elle survient lorsque vous essayez d’assigner une valeur undefined à une variable dont le type ne le permet pas. Cet article explique pourquoi cette erreur se produit, comment l’éviter et les bonnes pratiques pour la corriger efficacement.

Pourquoi cette erreur se produit-elle ?

En TypeScript, une variable doit respecter strictement le type qui lui est assigné. Par défaut, les types comme string, number ou boolean n’acceptent pas la valeur undefined. Si vous essayez d’assigner une valeur potentiellement undefined à une variable sans le préciser dans son type, TypeScript déclenche cette erreur.

Exemple de code générant l’erreur

Voici un exemple typique :

let age: number;
age = undefined; // Erreur : Type 'undefined' is not assignable to type 'number'.

Solutions pour corriger cette erreur

Voici plusieurs façons de résoudre cette erreur en fonction du contexte :

1. Inclure undefined dans le type

Si la variable peut accepter la valeur undefined, vous devez l’ajouter explicitement à son type :

let age: number | undefined;
age = undefined; // Pas d'erreur.

2. Initialiser la variable

Pour éviter qu’une variable soit undefined, vous pouvez lui attribuer une valeur par défaut au moment de sa déclaration :

let age: number = 0; // Pas d'erreur.

3. Utiliser des assertions non-nulles

Si vous êtes sûr que la variable ne sera jamais undefined au moment où elle est utilisée, vous pouvez utiliser l’opérateur ! :

let age: number | undefined;
console.log(age!); // L'opérateur "!" indique que la valeur n'est pas undefined.

Attention : Cette méthode doit être utilisée avec précaution car elle force TypeScript à accepter une hypothèse qui pourrait être incorrecte.

4. Activer l’option strictNullChecks

L’option strictNullChecks dans le fichier tsconfig.json force TypeScript à vérifier les types pour les valeurs nulles ou indéfinies :

{
"compilerOptions": {
"strictNullChecks": true
}
}

Cette option permet d’éviter des assignations invalides de undefined et garantit un code plus robuste.

5. Gérer les valeurs optionnelles

Si une valeur est optionnelle, utilisez le point d’interrogation (?) dans la déclaration :

function afficherAge(age?: number) {
  console.log(age); // Pas d'erreur.
}

FAQ : Questions fréquentes

1. Pourquoi TypeScript ne permet-il pas undefined par défaut ?

TypeScript adopte une approche stricte pour éviter les erreurs potentielles liées aux valeurs nulles ou indéfinies, qui sont des causes courantes de bugs en JavaScript.

2. Quand devrais-je inclure undefined dans un type ?

Incluez undefined dans le type lorsque la variable est susceptible de ne pas avoir de valeur, comme pour des options ou des états asynchrones.

3. Est-il préférable d’utiliser des types unions ou des valeurs par défaut ?

Utilisez des types unions si la variable peut être réellement undefined. Les valeurs par défaut sont préférables lorsque vous souhaitez éviter undefined dans votre code.

4. Quelle est la différence entre undefined et null ?

undefined signifie qu’une variable n’a pas été initialisée, tandis que null est une valeur intentionnellement assignée pour indiquer une absence de valeur.

5. Comment éviter cette erreur dans un projet TypeScript existant ?

Activez strictNullChecks dans votre configuration TypeScript et révisez les types pour inclure undefined ou fournissez des valeurs par défaut là où nécessaire.

Conclusion

L’erreur Type 'undefined' is not assignable to type est une fonctionnalité de sécurité puissante de TypeScript, garantissant que les variables respectent leurs types. En comprenant pourquoi cette erreur se produit et en utilisant les solutions décrites dans cet article, vous pouvez écrire un code TypeScript plus robuste et éviter les bugs liés aux valeurs indéfinies. Adoptez ces bonnes pratiques pour maximiser la fiabilité de vos projets TypeScript.

About the author

Équipe ErreursCode

L’Équipe ErreursCode, spécialisée en React et technologies modernes, propose des solutions détaillées pour les erreurs courantes et des guides pratiques pour optimiser vos projets web.