«as const» en TypeScript : sauver notre code des erreurs stupides

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

Introduction : Pourquoi votre code TypeScript se comporte-t-il étrangement ?

Avez-vous déjà écrit quelque chose comme ceci en TypeScript :

const direction = 'left';// ... et ensuite TypeScript disait que c'était string, pas 'left' ?

Ça vous parle ? C'est l'un des pièges les plus fréquents dans lequel même les développeurs expérimentés tombent. Aujourd'hui, nous allons analyser un outil puissant qui résout ce problème une fois pour toutes — as const.

Le sujet de cet article est basé sur une question réelle de Stack Overflow qui a recueilli des milliers de vues : "What does the 'as const' mean in TypeScript and what is its use case?". Nous adaptons cette question pour un contenu éducatif, ajoutons des exemples concrets et montrons comment as const en TypeScript aide à éviter les erreurs stupides.

Prêts ? C'est parti !

Qu'est-ce que as const en TypeScript en termes simples ?

as const est une construction spéciale (const assertion) qui dit à TypeScript : « Hé, n'élargis pas le type ! Fige cette valeur comme un littéral ». Autrement dit, vous interdisez à TypeScript de déduire un type plus général (par exemple, string) et vous le forcez à utiliser la valeur exacte.

Le problème sans as const

Regardez cet exemple simple :

// Sans as constconst role = 'admin'; // TypeScript déduira le type : 'admin' (car const)let userRole = 'admin'; // TypeScript déduira le type : string (car let)

// Et maintenant un tableau :const roles = ['admin', 'user', 'guest'];// TypeScript déduira : string[]

Lorsque vous utilisez let ou un tableau, TypeScript « élargit » le type vers un type plus général. C'est logique : la variable peut changer, le tableau peut muter. Mais dans 90 % des cas, c'est la valeur exacte dont vous avez besoin !

La solution avec as const

const roles = ['admin', 'user', 'guest'] as const;// TypeScript déduira : readonly ["admin", "user", "guest"]

const config = {  api: 'https://api.example.com',  timeout: 5000} as const;// TypeScript déduira :// {//   readonly api: "https://api.example.com";//   readonly timeout: 5000;// }

Maintenant, TypeScript connaît les littéraux exacts. Plus de string ou number — seulement des valeurs spécifiques. C'est la magie de as const en TypeScript.

Top 5 des erreurs avec as const (et comment les éviter)

Même en sachant ce qu'est as const, les développeurs commettent souvent les mêmes erreurs. Analysons-les avec des cas concrets.

Erreur n°1 : Tenter de modifier un objet readonly

Lorsque vous utilisez as const, l'objet ou le tableau devient readonly. Tenter de le modifier entraînera une erreur de compilation.

Mauvais :

const colors = ['red', 'green', 'blue'] as const;colors.push('yellow'); // Erreur ! Property 'push' does not exist on type 'readonly [...]'

Comment l'éviter :

Si vous avez besoin d'un tableau mutable, n'utilisez pas as const. Ou utilisez une copie :

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // Maintenant c'est un tableau normalmutableColors.push('yellow'); // Fonctionne

Erreur n°2 : Oublier les objets imbriqués

as const fonctionne de manière récursive — il rend toutes les propriétés imbriquées readonly. Beaucoup l'oublient.

Exemple :

const theme = {  colors: {    primary: '#007bff',    secondary: '#6c757d'  }} as const;

theme.colors.primary = '#000'; // Erreur ! Cannot assign to 'primary' because it is a read-only property.

Comment l'éviter :

Si vous devez modifier seulement une partie de l'objet, faites un as const superficiel ou utilisez des types partiels.