A Decorator is a special kind of declaration that can be applied to classes, methods, accessor, property, or parameter. Decorators are simply functions that are prefixed @expression symbol, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
A decorator is a function that applies to a class, method, property or parameter and adds some logic to the latter. In other word, using a decorator is the same (but far simpler) as creating a new class that extends the target class and has a field pointing to it:
To enable experimental support for decorators, we must enable the experimentalDecorators compiler option either on the command line or in our tsconfig.json:
Command Line
$tsc --target ES5 --experimentalDecorators tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
} Purpose
Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members. Decorators are a stage 2 proposal for JavaScript and are available as an experimental feature of TypeScript. NOTE Decorators are an experimental feature that may change in future releases.
Decorator Factories
To customize decorator how it is applied to a declaration, we can write a decorator factory. A decorator factory is a function which returns the expression that will be called by the decorator at runtime.
A decorator factory can be written in the following manner:
function color(value: string) { // this is the decorator factory
return function (target) { // this is the decorator
// do something with 'target' and 'value'...
}
} Decorator Composition
We can apply multiple decorators to a declaration. The following examples help to understand it.
On a single line
@f @g x On multiple lines
@f
@g
x Types of Decorators
TypeScript uses the following types of Decorators:
Class Decorators
Method Decorators
Accessor Decorators
Property Decorators
Parameter Decorators
1. Class Decorators
A class decorator is defined just before the class declaration, and it tells about the class behaviors. A class decorator is applied to the constructor of the class. A class decorator can be used to observe, modify, or replace a class definition. If the class decorator returns a value, it will replace the class declaration with the given constructor function.
2. Method Decorators
A Method Decorator is defined just before a method declaration. It is applied to a property descriptor for the method. It can be used to observe, modify, or replace a method definition. We cannot use method decorator in a declaration file.
The expression for the method decorator function accepts three arguments. They are:
Either the constructor function of the class for a static member or the prototype of the class for an instance member.
The member name.
The Property Descriptor for the member.
3. Accessor Decorators
An Accessor Decorator is defined just before an accessor declaration. It is applied to the property descriptor for the accessor. It can be used to observe, modify, or replace an accessor's definitions.
The expression for the accessor decorator function accepts three arguments. They are:
Either the constructor function of the class for a static member or the prototype of the class for an instance member.
The member name.
The Property Descriptor for the member.
4. Property Decorators
A property decorator is defined just before a property declaration. It is similar to the method decorators. The only difference between property decorators and method decorators is that they do not accept property descriptor as an argument and do not return anything.
The expression for the property decorator function accepts two arguments. They are:
Either the constructor function of the class for a static member or the prototype of the class for an instance member.
The member name.
5. Parameter Decorators
A parameter decorator is defined just before a parameter declaration. It is applied to the function for a class constructor or method declaration. It cannot be used in a declaration file or in any other ambient context (such as in a declared class).
The expression for the parameter decorator function accepts three arguments. They are:
Either the constructor function of the class for a static member or the prototype of the class for an instance member.
The member name.
The index of the parameter in the function's arguments list.
Resource: Javapoint, Wikipedia, Typescriptlang
The Tech Platform