TypeScript Decorators

Introduction

As we already know that typescript decorators are used to used to decorate the class and its members that is it is used to modify the class and its members while calling the function. Decorators in typescript use the form @, and are used to add both annotations and a meta-programming syntax for class declarations and members. When we apply a decorator to a class or a class member, we are actually calling a function that is going to receive details of what is being decorated, and the decorator implementation of it will then be able to transform the code dynamically by adding extra functionality and reducing and boilerplate code.

Now that we know that what are the decorators in typescript, so to enable the experimental decorators in typescript we must either enable experimental decorators in the command line or in our tsconfig file. So lets us see the syntax of the command line in typescript programming language:

Syntax of tsconfig.json:

The above is the syntax of both the command line and tsconfig.json. Now let us read about the types of decorators in typescript:

Types of Decorators in Typescript

There are mainly five types of decorators in typescript. They are:

1. Class Decorators
2. Method Decorators
3. Accessor Decorators
4. Property Decorators
5. Parameter Decorators

Now let us read about each of them in details:

1. Class Decorators

The class decorator is declared before the class declaration, it is used to modify a class. If in any case, the class decorator returns a value, then it will be used to replace the class declaration with the provided constructor function. Now let us see an example to understand class decorators in typescript:

In the above code, we have used the @sealed decorator above the class student, as a result, both the constructor and the properties inside it will be sealed. Run the above code in your editor for a better and clear explanation.

2. Method Decorators

As in the class decorators, we used the decorator before the class name so in the method decorator, we will use the method decorator before the method declaration in the typescript. The method decorators are used to modify or replace the method properties in typescript.

The method declaration expression accepts three arguments so now let us read about them with the help of an example:

1. The name of the member
2. The property description for the member
3. Either the constructor function of the class for a static member or the prototype of the class for an instance member. Now let us see an example to understand method decorators in typescript:

In the above example, as we can see that we have not used the decorators above classes, we have used the decorator above the method name.

3. Accessor Decorators

Since we know that the decorators are an experimental feature proposed for ES7.The Accessor Decorators are used before any Accessor declaration in typescript. Accessor Decorators are used to modify or replace an accessor's properties in typescript and they cannot be used in any declaration file.

There are three properties for the expression of the accessor decorator function. Let us read about them:

1. The name of the member
2. The property description for the member
3. Either the constructor function of the class for a static member or the prototype of the class for an instance member.

Now let us understand this with the help of an example:

Here in the above code, we have used the Accessor Decorators for the members of the class.

4. Property Decorators

The Property Decorators in typescript is used or declared just before any property is declared. As we know that there were three properties in method decorators but in property decorators, there are only two properties in property decorators do not accept property descriptors as an argument and do not return anything.

Let us read about the two properties of property decorators in typescript:

1. The name of the member.
2. Either the constructor function of the class for a static member or the prototype of the class for an instance member.

Now let us understand this with the help of an example:

Here the name yash will only be printed because since we have used the property decorator so we cannot change the name even if we wish to so the output will be the starting name that is swagata only. Run the above code in your editor for a better and clear explanation.

5. Parameter Decorators

The Parameter Decorators in typescript are used or we can say declared before we declare a parameter. Parameter Decorators are only used to observe whether a parameter has been declared on a method or not. It is not used in any declaration file.

The parameter decorators also accept three arguments. Let us read about them and understand them with the help of an example:

1. The name of the member
2. The index of the parameters in the function parameter list
3. Either the constructor function of the class for a static member or the prototype of the class for an instance member.

Now let us understand this with the help of an example:

In the above code, we have used the decorator just before the parameter list. Run the above code in your editor for a better and clear explanation.

What are Decorators?

Decorators are special kinds of declarations in typescript which are can be used in any class, method, property, accessor and parameter. To use a decorator we must add a @ before the expression form. Decorators are used to adding annotations and metadata to our existing code. We use the decorators usually before the definition of a function we want to decorate. The decorators are usually applied on the class or its members when we call the function. There is a way in typescript to have metaprogramming, which is a programming technique itself that enables the programmer to create code that uses other code from the application itself as data.

Decorator Factories

Decorator factories are mainly used when we want to modify a decorator. In a decorator factory, the function which returns the expression will be called by the decorator at runtime.

Let us see an example to understand this:

This is how a decorator factory is written. Now let us read about Decorator Composition.

Decorator Composition

Decorator Composition is used when we want to declare multiple decorators inside a function. When we want to use decorators on a single line we use the following syntax:

When we want to use decorators on multiple lines we use the following syntax:

The following two steps are performed when evaluating multiple decorators on a single declaration in TypeScript:

1. The expressions for each decorator are evaluated top-to-bottom.
2. The results are then called functions from bottom to top.

Decorator Evaluation

In decorators evaluation we can see how the decorators are evaluated inside the class in typescript:

1. The parameter Decorators are followed by Method decorators Accessor decorators, or Property Decorators are applied for each instance member.
2. The parameter Decorators are followed by Method decorators, Accessor decorators, or Property Decorators are applied for each static member.
3. The parameter Decorators are applied for each of the constructors.
4. The class Decorators are applied to the class.

TypeScript Decorators Use Cases

Decorators are used to solving problems too. Let us read about the use cases of decorators in detail. Decorators in typescript not only can be used to slow down the time it takes to write some code, but they can also be incredibly helpful at speeding up code. Decorators are only incredibly useful when you find them about, but it is also a great idea to write your own. Now let us read about the use cases of decorators in detail.

It helps us to Calculate execution time.

Let us see how it helps us to calculate execution time:

We will create a simple decorator of how to calculate execution time and print it :

If we want to measure the time of the print method we can use decorators. Run the above code in your editor for a better and clear explanation.

How to Get Started with TypeScript decorators?

Decorators are an experimental guide in typescript and to enable this feature in the feature in typescript we can set the experimental decorator's compiler flag either on our command line or in your tsconfig.json file.

Let us see the syntax of both for a better explanation: Command Line

tsconfig.json