| ☰ See All Chapters |
TypeScript Decorators
Decorators make it possible to alter the characteristics of classes, methods, properties, and parameters. They play an important role in Angular, which uses parameter decorators as part of its dependency injection process.
Decorators allow us to inject code into the actual definition of a class.
Decorators can be used on class definitions, class properties, class functions, and even method parameters.
Decorators are an experimental feature of the TypeScript compiler, and have been proposed as part of the ECMAScript 7 standard. TypeScript, however, allows for the use of decorators in ES3 and above.
In order to use decorators, a new compile option needs to be added to the tsconfig.json file in the root of your project directory. This option is named experimentalDecorators, and needs to be set to true, as follows:
{ "compilerOptions": { "module": "commonjs", "target": "es3", "sourceMap": true, "experimentalDecorators": true }, "exclude": [ "node_modules" ] } |
A decorator is simply a function which is called with a specific set of parameters.
It belongs to one of four function types: PropertyDecorator, ClassDecorator, MethodDecorator, or ParameterDecorator.
Decorator functions are invoked by preceding a Property, Class, Method with the decorator function's name preceded by @.
Decorators are read by the compiler, which modifies the affected code as it generates JavaScript. In other words, the code in a decorator function executes at runtime, but the code modification is performed during compilation.
Decorators are not allowed on constructors.
All Chapters
