Experimentelle Dekorateure in TypeScript: Ein Blick unter die Haube

Warum schreit Ihr TypeScript wegen „experimenteller Dekorateure“?

Haben Sie jemals die Kompilierung eines TypeScript-Projekts gestartet und in der Konsole so etwas gesehen wie:

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.

Wenn ja – Sie sind nicht allein. Diese Frage auf Stack Overflow hat tausende Aufrufe und Dutzende Antworten gesammelt. Aber die meisten schlagen einfach vor, „das Flag zu aktivieren und zu vergessen“. Wir gehen heute weiter: Wir werden verstehen, was die experimental decorators warning in TypeScript ist, woher sie kommt, wie sie unter der Haube funktioniert und warum TypeScript Dekorateure überhaupt als „experimentell“ betrachtet.

Was sind Dekorateure in TypeScript (und warum sind sie experimental)?

Dekorateure sind ein mächtiges Werkzeug der Metaprogrammierung. Sie ermöglichen es, Klassen, Methoden, Eigenschaften und Parameter zur Laufzeit zu annotieren und zu modifizieren. Wenn Sie mit Angular, NestJS oder TypeORM gearbeitet haben, sind Sie ihnen bereits begegnet:

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

Aber hier liegt der Haken: Der JavaScript-Standard für Dekorateure (TC39 proposal) befindet sich noch immer in der Stage 3. Das bedeutet, dass sich Syntax und Semantik ändern können. TypeScript, als Obermenge von JavaScript, kann die Implementierung nicht einfach „einfrieren“ – es bietet experimentelle Unterstützung für Dekorateure über das Flag experimentalDecorators.

Wenn Sie diese Option aktivieren, generiert der TypeScript-Compiler Code, der veralten oder bei einem Update des Standards brechen kann. Deshalb warnt er ehrlich: „Du nutzt es auf eigenes Risiko“.

Wie funktioniert die experimental decorators warning unter der Haube des Compilers?

Um die Warnung zu verstehen, werfen wir einen Blick in den Quellcode von TypeScript. In der Datei checker.ts (ja, das ist eine echte Datei im Compiler) gibt es die Funktion checkGrammarForDecorator. Wenn der Parser auf einen Dekorateur trifft, prüft der Compiler, ob das Flag experimentalDecorators in der tsconfig.json gesetzt ist.

Wenn das Flag nicht gesetzt ist, generiert er eine Diagnosemeldung – genau diese Warnung. Es ist kein Fehler (der Code wird trotzdem kompiliert), aber der Compiler erinnert eindringlich: „Hey, du nutzt eine Funktion, die sich ändern kann!“.

So sieht die vereinfachte Logik aus:

// Pseudocode der tatsächlichen TypeScript-Logik\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}

Der Fehlercode 1219 ist genau die Warnung, die Sie sehen. Und der Code 1220 ist eine ähnliche Warnung für emitDecoratorMetadata (ein weiteres experimentelles Flag, über das wir später sprechen werden).

So deaktivieren Sie die experimental decorators warning: 3 Methoden

Der einfachste Weg ist, das Flag in der tsconfig.json hinzuzufügen:

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

Wenn Sie die Kommandozeile verwenden:

tsc --experimentalDecorators

Oder wenn Sie keine tsconfig.json haben, können Sie das Flag direkt übergeben:

npx tsc --experimentalDecorators src/index.ts

Danach verschwindet die Warnung. Aber das ist nur die Spitze des Eisbergs. Lassen Sie uns verstehen, was tatsächlich passiert, wenn Sie experimentalDecorators aktivieren.

Was generiert der Compiler unter der Haube?

Wenn Sie einen Klassen-Dekorateur schreiben