Erreur Type 'string' is not assignable to type : comprendre et corriger en TypeScript

« Type 'string' is not assignable to type » — qu'est-ce que c'est et pourquoi vous êtes ici ?

Si vous avez déjà codé en TypeScript, vous avez forcément vu un soulignement rouge dans votre éditeur avec ce message :

Type 'string' is not assignable to type 'SomeType'.

Cette erreur est un véritable « bonjour » du typage strict. Elle effraie les débutants, mais en réalité, c'est la meilleure amie du développeur. Dans cet article, nous allons décortiquer pourquoi l'erreur Type 'string' is not assignable to type se produit, comment la corriger et quelles approches utiliser pour travailler avec les littéraux de chaîne, les types union et les génériques. Cet article est rédigé pour le site éducatif pythonlib.ru, mais les exemples sont exclusivement en TypeScript.

1. La racine du problème : pourquoi TypeScript râle-t-il sur les chaînes ?

TypeScript est une surcouche de JavaScript qui ajoute le typage statique. Lorsque vous écrivez :

let role: 'admin' | 'user' = 'admin';\nrole = 'moderator'; // Erreur : Type '"moderator"' is not assignable to type '"admin" | "user"'\n

TypeScript comprend que la variable role ne peut prendre que deux valeurs : 'admin' ou 'user'. Quand vous essayez d'assigner 'moderator', le compilateur génère une erreur. Mais pourquoi écrit-il « Type 'string' is not assignable to type » ?

En réalité, le littéral de chaîne 'moderator' a le type string, alors que le type attendu est 'admin' | 'user'. TypeScript compare les types, pas les valeurs. Il voit : « Tu me donnes une chaîne ordinaire, mais j'attends des chaînes spécifiques ». D'où le message.

1.1. Un exemple simple pour comprendre

Prenons un cas de base :

type Status = 'active' | 'inactive';\n\nfunction updateStatus(status: Status) {\n  console.log(status);\n}\n\nconst myStatus = 'active';\nupdateStatus(myStatus); // OK\n\nconst anotherStatus = 'pending';\nupdateStatus(anotherStatus); // Erreur : Type 'string' is not assignable to type 'Status'\n

Dans le dernier cas, la variable anotherStatus est inférée comme string, et non comme 'pending'. TypeScript ne sait pas que 'pending' est un littéral. Il ne voit que le type string. Pour corriger cela, il suffit de préciser le type explicitement :

const anotherStatus: 'pending' = 'pending'; // Maintenant ça fonctionne\n

2. Comparaison des approches : comment contourner ou corriger l'erreur

Il existe plusieurs façons de gérer l'erreur Type 'string' is not assignable to type. Comparons-les en termes de simplicité, de sécurité et de performance.

2.1. Approche 1 : as const — geler le littéral

La méthode la plus élégante consiste à utiliser as const. Cela « gèle » la valeur en tant que littéral :

const myStatus = 'active' as const;\nupdateStatus(myStatus); // OK\n

Avantages : simple, lisible, sûr.
\nInconvénients : fonctionne uniquement avec const, pas avec let.

2.2. Approche 2 : Type Assertion (as) — conversion explicite

Vous pouvez dire à TypeScript : « Je sais ce que je fais » :

const someString: string = 'active';\nupdateStatus(someString as Status); // OK\n

Avantages : solution rapide.
\nInconvénients : vous désactivez la vérification de type. Si vous passez une valeur incorrecte, l'erreur n'apparaîtra qu'à l'exécution.

2.3. Approche 3 : Type Guard (garde de type)

Écrivons une fonction qui vérifie si une chaîne est un statut valide :

function isStatus(value: string): value is Status {\n  return value === 'active' || value === 'inactive';\n}\n\nfunction safeUpdate(value: string) {\n  if (isStatus(value)) {\n    updateStatus(value); // TypeScript sait que value est de type Status\n  } else {\n    throw new Error('Statut invalide');\n  }\n}\n