Decorators in TypeScript

Decorators

Decorators are simply functions that are prefixed @ symbol and can be attached to a class declaration, method, accessor, property, or parameter. The decorator supplies information about the class, method, property, or parameters.

Decorators are the methods by which we are able to wrap code with another function effectively. it's just like a virtual wrapper that is useful for the design pattern that allows certain purpose dependent behavior to be injected into an object/function, either using the static or the dynamic approach.

Decorators are proposed for a future version of JavaScript and they are available as an experimental feature (stage 2 proposal) of TypeScript.

There are the following types of decorators, you can use with TypeScript:

1. Class Decorators

2. Method Decorators

3. Accessor Decorators

4. Property Decorators

5. Parameter Decorators

Class Decorator

A Class Decorator is attached to a class declaration and tells about the class behaviors. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition.

classdecorator.ts

@sealed
class Employee {
 constructor(private firstName: string, private lastName: string) { }
 showDetails() {
 return this.firstName + ", " + this.lastName;
 }
}

In the above example, the @sealed decorator will seal both the constructor and its prototype so that you cannot inherit the class.

Method Decorator

A method Decorator is attached to the methods of a class.

The method decorator in TypeScript will a three different parameters that are given below.

1. The constructor function or the prototype of a class
2. The property key, that refers to the member name of the class
3. The property descriptor contains information on the current property of the member

methoddecorator.ts

class ItemList {
 itemArray: Array;
 constructor() {
 this.itemArray = [];
 }
 @log
 Add(item: string): void {
 this.itemArray.push(item);
 }
 GetAll(): Array {
 return this.itemArray;
 }
}

In the above example, the @log decorator will log the new item entry.

Property Decorator

A property Decorator is attached to the properties of a class.

We can also use the property decorators to override the property being that is currently being decorated and it can be done by using the Object.defineProperty() along with a new type of setter and getter functions of the property.

propertydecorator.ts

class Company {
 @ReadOnly 
 name: string = "Dot Net Tricks";
}

let company = new Company();
t.name = 'TCS'; // you can't change it's name
console.log(t.name); // 'Dot Net Tricks'

In the above example, the @ReadOnly decorator will make the name property is read-only, so you can’t change its value.

What do you think?

In this article on decorator in TypeScript, we have gotten all the required knowledge of decorator and also implemented some of the frequently used decorators supported by the TypeScript, used it by using the class definition, and learned the differences between each one of them accordingly.

I hope you will enjoy the Decorators in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our free typescript skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE