Comment convertir une chaîne en enum en TypeScript : tutoriel complet

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Comment convertir une chaîne en enum en TypeScript : guide étape par étape

\n\n

Avez-vous déjà été confronté à une situation où l'API renvoie une chaîne, alors que votre modèle TypeScript est strictement typé via un enum ? Ou peut-être recevez-vous une valeur depuis localStorage et souhaitez-vous la convertir en toute sécurité en énumération ? Si oui, vous êtes au bon endroit. Dans cet article, nous allons voir comment convertir une chaîne en enum en TypeScript — des solutions simples aux techniques avancées avec gestion des erreurs.

\n\n

Ce sujet est l'un des plus populaires sur Stack Overflow (des milliers de vues !), et ce n'est pas pour rien. Même les développeurs expérimentés se trompent souvent lorsqu'il s'agit de convertir en toute sécurité des chaînes en énumérations. Mettons les choses au clair.

\n\n

Qu'est-ce qu'un enum en TypeScript et pourquoi le convertir ?

\n\n

Un enum (énumération) est un outil puissant de TypeScript qui permet de définir un ensemble de constantes nommées. Au lieu d'utiliser des "chaînes magiques" comme 'active' ou 'pending', vous définissez un enum et travaillez avec des valeurs typées. Mais voici le problème : les données provenant de sources externes (API, formulaires, fichiers de configuration) arrivent souvent sous forme de chaînes ordinaires. Et la question se pose alors : comment convertir une chaîne en enum TypeScript de manière sûre et élégante ?

\n\n
// Exemple d'enum\nenum Status {\n  Active = 'active',\n  Inactive = 'inactive',\n  Pending = 'pending'\n}\n\n// Chaîne provenant de l'API\nconst apiStatus: string = 'active';\n// Comment obtenir Status.Active ? 🤔
\n\n

Méthode 1 : Assertion de type directe (Type Assertion)

\n\n

La méthode la plus simple, mais aussi la plus dangereuse. Vous dites simplement à TypeScript : "Fais-moi confiance, c'est la bonne valeur".

\n\n
const status = apiStatus as Status;\n// ou\nconst status = <Status>apiStatus;
\n\n

Avantage : Minimum de code. Inconvénient : Si la chaîne ne correspond à aucune valeur de l'enum, vous obtiendrez undefined sans avertissement. TypeScript ne lèvera pas d'erreur, et vous ne découvrirez le problème qu'à l'exécution, quand quelque chose se cassera.

\n\n

Cette méthode ne doit être utilisée que si vous êtes absolument certain de la source des données. Pour la production, elle est déconseillée.

\n\n

Méthode 2 : Utilisation d'une fonction utilitaire personnalisée

\n\n

C'est le juste milieu entre simplicité et sécurité. Écrivons une fonction qui prend une chaîne et vérifie si cette valeur existe dans l'enum.

\n\n
function stringToEnum<T>(value: string, enumObject: T): T[keyof T] | undefined {\n  // Vérifions si la valeur est dans l'enum\n  const enumValues = Object.values(enumObject) as string[];\n  if (enumValues.includes(value)) {\n    return value as unknown as T[keyof T];\n  }\n  return undefined;\n}\n\n// Utilisation\nconst status = stringToEnum(apiStatus, Status);\nif (status) {\n  console.log(status); // Status.Active\n} else {\n  console.error('Valeur de statut incorrecte');\n}
\n\n

Cette fonction convertit en toute sécurité une chaîne en enum TypeScript. Si la valeur n'est pas trouvée, elle retourne undefined, et vous pouvez traiter ce cas. Notez le générique <T> — il rend la fonction universelle pour n'importe quel enum.

\n\n

Méthode 3 : Approche stricte avec levée d'erreur

\n\n

Parfois, undefined n'est pas ce dont vous avez besoin. Il est préférable de lever explicitement une erreur pour détecter rapidement le problème.

\n\n
function stringToEnumStrict<T>(value: string, enumObject: T): T[keyof T] {\n  const enumValues = Object.values(enumObject) as string[];\n  if (enumValues.includes(value)) {\n    return value as unknown as T[keyof T];\n  }\n  throw new Error(`La valeur "${value}" n'a pas été trouvée dans l'enum`);\n}\n\n// Utilisation\ntry {\n  const status = stringToEnumStrict(apiStatus, Status);\n  // Travailler avec status\n} catch (error) {\n  console.error(error.message);\n  // Enregistrer l'erreur dans Sentry ou un autre système de surveillance\n}

                
                

Blogs

Book Recommendations