TypeScript Decorators

TypeScript Decorators are a new and special way of declaring the classes, methods, parameters, and properties. The decorators are defined using the @expression syntax, where the expression will be a function that is to be invoked at the runtime with the information of the decorated declaration.

Syntax:

// A decorator with the name @dempDecorator
// can be declared as follows.
function demoDecorator(){
    // Decorator statements
}

The decorators can be implemented by editing some properties in the tsconfig.json file. You need to set the value of the experimentalDecorators to true inside the compiler options.

{
    'compilerOptions': {
        'target': ES5,
        'experimentalDecorators': true
    }
}

You can also set the experimentalDecorators to true or enable it by using the below command.

tsc --target ES5 --experimentalDecorators

TypeScript Decorators

• Decorator Factories: A Decorator Factory can be written when you want to customize that how a decorator can be applied to a declaration. It is a simple function that returns an expression that will be called at runtime by the decorator.
• Decorator Composition: Decorator composition deals with applying multiple decorators with a single declaration. The composition evaluation is similar to the function composition in mathematics. i.e. (f o g)(x) evaluates to f(g(x)).
• Decorator Evaluation: It defines how can we define a decorator inside a class in a specific order. that is Parameter of Decorators-> then Method-> then Accessor or Property Decorators for both instance member and static member. and For the constructor, we define the Parameter Decorators and for the class, we define the Class Decorators.
• Class Decorators: The class decorators are also defined just before declaring the class. A class decorator is also used to observe, replace, and modify the class definition. The class constructors are used to apply the class decorator.
• Method Decorators: The method decorators in TypeScript are defined just before the method declaration. The method decorators are mainly used to modify, replace and observe the definition of a method. They can not be used inside the definition file.
• Accessor Decorator: An accessor decorator is applied on the property descriptor by defining it just before the accessor declartion. It can be used to modify, replace and observe the accessor definitions. You can not use the accessor decorator on both the get and set accessors.
• Parameter Decorator: The parameter decorators are applied on the functions that are created for the class constructor or the method declaration. These decorators are defined just before declaring the parameters. They can not be defined inside the definition file.
• Property Decorators: These decorators are defined just before declaring the property. A property decorator can not be defined inside any ambient context and the declaration file.
• Parameter Decorators: These decorators are defined just before the parameter declaration. for class constructor or method declaration parameter decorator is used. It is not used in a declaration file, an overload, or any other ambient context.
• Metadata: This is the library that provides experimental metadata api e.g. reflect-metadata. but yet it is not a part of the ECMAScript standard.

Example 1: The below example will explain how you can implement the decorators practically.

Javascript

// Decorator method
function decoratorMethod(realMethod: any, _ctx: any) {
    function replacedDecoratorMethod(this: any,
        ...args: any[]) {
        console.log(`Hi, ${realMethod.name}
      method starts executing here.`);
        const res = realMethod.call(this, ...args);
        console.log(`The ${realMethod.name}
       method stops executing here.`);
        return res;
    }

    return replacedDecoratorMethod;
}

// Implementing class for decorator method
class User {
    constructor(private name: string,
        private desc: string) { }

    @decoratorMethod
    welcome() {
        console.log(`Hello, Welcome to
       ${this.name}.`);
    }

    @decoratorMethod
    description() {
        console.log(`It is "${this.desc}".`);
    }
}

const user = new User("GeeksforGeeks",
    "A Computer Science portal for all geeks");
user.welcome();
user.description();

Output:

Hi, welcome method starts executing here.
Hello, Welcome to GeeksforGeeks
The welcome method stops executing here
Hi, description method starts executing here.
It is "A Computer Science portal for all geeks".
The description method stops executing here.

Example 2: The below example will illustrate how you can implement the decorators practically.

Javascript

function ClassDecorator(constructorDecorator: Function) {
  constructorDecorator.prototype.runs = 26000;
}

@ClassDecorator
class Cricketer {
  constructor(public c_name: string) {}
}

const crktr = new Cricketer('Virat Kohli');
console.log(crktr.c_name, crktr.runs);

Output:

Virat Kohli,  26000