Décorateurs expérimentaux en TypeScript : décortiquons le fonctionnement interne

Pourquoi votre TypeScript crie-t-il à propos des « décorateurs expérimentaux » ?

Avez-vous déjà lancé la compilation d'un projet TypeScript et vu quelque chose comme ceci dans la console :

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig.json' or '--experimentalDecorators' to remove this warning.

Si oui — vous n'êtes pas seul. Cette question sur Stack Overflow a recueilli des milliers de vues et des dizaines de réponses. Mais la plupart d'entre elles suggèrent simplement « d'activer le drapeau et d'oublier ». Aujourd'hui, nous allons plus loin : nous allons comprendre ce qu'est l'avertissement sur les décorateurs expérimentaux en TypeScript, d'où il vient, comment il fonctionne sous le capot et pourquoi TypeScript considère les décorateurs comme « expérimentaux ».

Que sont les décorateurs en TypeScript (et pourquoi sont-ils expérimentaux) ?

Les décorateurs sont un outil puissant de métaprogrammation. Ils permettent d'annoter et de modifier des classes, des méthodes, des propriétés et des paramètres lors de l'exécution. Si vous avez travaillé avec Angular, NestJS ou TypeORM, vous les avez déjà rencontrés :

@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nclass AppComponent {}

Mais voici le problème : la norme JavaScript pour les décorateurs (proposition TC39) est encore au stade Stage 3. Cela signifie que la syntaxe et la sémantique peuvent changer. TypeScript, étant un sur-ensemble de JavaScript, ne peut pas simplement « figer » l'implémentation — il propose un support expérimental des décorateurs via le drapeau experimentalDecorators.

Lorsque vous activez cette option, le compilateur TypeScript génère un code qui peut devenir obsolète ou se casser lors de la mise à jour de la norme. C'est pourquoi il vous avertit honnêtement : « Tu l'utilises à tes propres risques ».

Comment fonctionne l'avertissement sur les décorateurs expérimentaux sous le capot du compilateur ?

Pour comprendre l'avertissement, regardons dans les sources de TypeScript. Dans le fichier checker.ts (oui, c'est un vrai fichier à l'intérieur du compilateur), il y a une fonction checkGrammarForDecorator. Lorsque l'analyseur rencontre un décorateur, le compilateur vérifie si le drapeau experimentalDecorators est défini dans tsconfig.json.

Si le drapeau n'est pas défini, il génère un message de diagnostic — cet avertissement même. Ce n'est pas une erreur (le code sera quand même compilé), mais le compilateur rappelle insistance : « Hé, tu utilises une fonctionnalité qui peut changer ! ».

Voici à quoi ressemble la logique simplifiée :

// Pseudo-code de la logique réelle de TypeScript\nfunction checkDecoratorUsage(decorator: Decorator, options: CompilerOptions) {\n  if (!options.experimentalDecorators) {\n    reportDiagnostic({\n      code: 1219,\n      message: "Experimental support for decorators is a feature that is subject to change in a future release..."\n    });\n  }\n}

Le code d'erreur 1219 est exactement l'avertissement que vous voyez. Et le code 1220 est un avertissement similaire pour emitDecoratorMetadata (un autre drapeau expérimental dont nous parlerons ci-dessous).

Comment désactiver l'avertissement sur les décorateurs expérimentaux : 3 méthodes

Le moyen le plus simple est d'ajouter le drapeau dans tsconfig.json :

{\n  "compilerOptions": {\n    "experimentalDecorators": true\n  }\n}

Si vous utilisez la ligne de commande :

tsc --experimentalDecorators

Ou si vous n'avez pas de tsconfig.json, vous pouvez passer le drapeau directement :

npx tsc --experimentalDecorators src/index.ts

Après cela, l'avertissement disparaîtra. Mais ce n'est que la partie émergée de l'iceberg. Voyons ce qui se passe réellement lorsque vous activez experimentalDecorators.

Que génère le compilateur sous le capot ?

Lorsque vous écrivez un décorateur de clas