”;
Decorators in TypeScript are special kinds of declarations that can be attached to the class declaration, property, accessor, method, and parameters. It is used for the separate modification of the class without modifying the original source code. This makes them a powerful tool in the domain of object-oriented programming, allowing you to write cleaner, more organized code that adheres to the DRY (Don”t Repeat Yourself) principle.
Using Decorators in TypeScript
You are required to enable the ”experimentalDecorators” compiler option to enable the experimental support for decorators in your TypeScript project.
There are 2 ways to enable ”experimentalDecorators” compiler option in TypeScript. You can use any option.
- Execute the below command in the terminal in the project directory.
tsc –target ES5 –experimentalDecorators - Or, you can update the tsconfig.js file and add “experimentalDecorators”: true attribute in compilerOptions object.
{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true } }
Decorator Syntax
You can follow the syntax below to use decorators in TypeScript.
@DecoratorName
In the above syntax, ”DecoratorName” is a function name that is prefixed with the ”@” symbol. The expression must evaluate the ”DecorateName” function at the run time.
Decorator Factories
Whenever you need to customize how the decorator function is applied to declarations, they can use the decorator factories. A decorator factory function returns the expression which will be evaluated at the run time.
Follow the syntax below to use the decorator factory function.
function decoratorName(args: string) {
// Decorator factory returns the function expression
return function (target) {
// This is the decorator which will be evaluated at the run time.
};
}
In the above syntax, ”args” is an argument passed to the decorator function, and ”target” is a prototype of the class.
Decorator Composition
You can use multiple decorators with particular declarations. Multiple decorators either can be used in a single line or multiline as shown below.
In a single line:
@f @g x
OR, In multi lines:
@f @g x
In the above syntax, ”f” and ”g” decorators are used with a single declaration ”x”.
Why Use Decorators?
Let”s take a simple example to understand the use cases of decorators.
// Defining a class
class Student {
// Declaring the properties of the class
constructor(private name: string, private rollNo: number) { }
// Defining the methods of the class
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
printrollNo() {
console.log(`My RollNo is ${this.rollNo}.`);
}
}
// Creating an object of the class
const user = new Student("John", 20);
// Accessing the properties of the class
user.sayHello();
user.printrollNo();
On compiling, it will generate the following JavaScript code:
// Defining a class
class Student {
// Declaring the properties of the class
constructor(name, rollNo) {
this.name = name;
this.rollNo = rollNo;
}
// Defining the methods of the class
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
printrollNo() {
console.log(`My RollNo is ${this.rollNo}.`);
}
}
// Creating an object of the class
const user = new Student("John", 20);
// Accessing the properties of the class
user.sayHello();
user.printrollNo();
It produces the following output:
Hello, my name is John. My RollNo is 20.
Now, what if we want to log the function when the execution of the function starts and ends? We need to add logs at the start and end of each function as shown in the below code.
// Defining a class
class Student {
// Declaring the properties of the class
constructor(private name: string, private rollNo: number) { }
// Defining the methods of the class
sayHello() {
console.log("Start: sayHello");
console.log(`Hello, my name is ${this.name}.`);
console.log("End: sayHello");
}
printrollNo() {
console.log("Start: printrollNo");
console.log(`My RollNo is ${this.rollNo}.`);
console.log("End: printrollNo");
}
}
// Creating an object of the class
const user = new Student("John", 20);
// Accessing the properties of the class
user.sayHello();
user.printrollNo();
On compiling, it will generate the following JavaScript code:
// Defining a class
class Student {
// Declaring the properties of the class
constructor(name, rollNo) {
this.name = name;
this.rollNo = rollNo;
}
// Defining the methods of the class
sayHello() {
console.log("Start: sayHello");
console.log(`Hello, my name is ${this.name}.`);
console.log("End: sayHello");
}
printrollNo() {
console.log("Start: printrollNo");
console.log(`My RollNo is ${this.rollNo}.`);
console.log("End: printrollNo");
}
}
// Creating an object of the class
const user = new Student("John", 20);
// Accessing the properties of the class
user.sayHello();
user.printrollNo();
It will produce the following output:
Start: sayHello Hello, my name is John. End: sayHello Start: printrollNo My RollNo is 20. End: printrollNo
What if we want to reuse the logic of logging the function execution without writing the repeated code? Here, decorators come into the picture.
Let”s learn it via the example below.
// Decorator factory
function printExecution(method: any, _context: any) {
// Returning a new function
return function (value: any, ...args: any[]) {
// Logging the method name at the start
console.log("start:", method.name);
// Calling the original method
const result = method.call(value, ...args);
// Logging the method name at the end
console.log("end:", method.name);
return result;
}
}
// Defining a class
class Student {
// Declaring the properties of the class
constructor(private name: string, private rollNo: number) { }
// Defining the methods of the class
@printExecution
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
@printExecution
printrollNo() {
console.log(`My RollNo is ${this.rollNo}.`);
}
}
// Creating an object of the class
const user = new Student("John", 20);
// Accessing the properties of the class
user.sayHello();
user.printrollNo();
The above code prints the same output as the previous code.
Start: sayHello Hello, my name is John. End: sayHello Start: printrollNo My RollNo is 20. End: printrollNo
Class Decorators
Class decorators are used with the class declaration to observe or modify the class definition.
Example
// Decorator factory
function LogClass(target: Function) {
console.log(`${target.name} is instantiated`);
}
// Decorator
@LogClass
class MyClass {
constructor() { console.log("MyClass instance created"); }
}
// Create an instance of the class
const myClassInstance = new MyClass();
On compilation, it will generate the following JavaScript code:
// Class definition
class MyClass {
constructor() { console.log("MyClass instance created"); }
}
// Decorator
LogClass(MyClass);
// Create an instance of the class
const myClassInstance = new MyClass();
Output
MyClass instance created MyClass is instantiated
Method Decorators
The method decorators are used to replace, modify, or observe the method definition. It is used with the method definition.
Example
// Decorator factory
function printExecution(method: any, _context: any) {
// Returning a new function
return function (value: any, ...args: any[]) {
// Logging the method name at the start
console.log("start:", method.name);
// Calling the original method
const result = method.call(value, ...args);
return result;
}
}
// Defining a class
class Person {
constructor(private name: string) { }
// Decorator
@printExecution
printName() {
console.log(`Hello, my name is ${this.name}.`);
}
}
// Create an object of the class
const user = new Person("John");
// Accessing the properties of the class
user.printName();
Output
start: printName Hello, my name is John.
Accessor Decorators
Accessor decorators are used with the get() and set() accessors to observe, replace, and modify the definition of the accessor.
Example
// Decorator factory
function LogAccessor(method: any) {
console.log("Getter called");
}
// Define a class
class MyClass {
private _name: string = "MyClass";
// Decorator
@LogAccessor
get name() {
return this._name;
}
}
const instance = new MyClass();
console.log(instance.name);
Output
Getter called MyClass
Property Decorators
Property decorators are used with the property to modify, replace, and observe it.
Example
// Decorator function to log the property name
function LogProperty(target: any, propertyKey: string) {
console.log(`Property declared: ${propertyKey}`);
}
class Person {
// Decorator is applied to the property
@LogProperty
name: string;
@LogProperty
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let person = new Person(''Jay'', 23);
Output
Property declared: name Property declared: age
Parameter Decorators
Parameter decorators are used with the method parameters to observe, modify, and replace them.
Example
// Decorator with parameter
function LogParameter(target: any, methodName: string, parameterIndex: number) {
console.log(`Parameter in ${methodName} at index ${parameterIndex} has been decorated`);
}
// Class decorator
class MyClass {
myMethod(@LogParameter param: string) {
console.log(`Executing myMethod with param: ${param}`);
}
}
// Create an instance of the class
const instance = new MyClass();
instance.myMethod("test");
Output
Parameter in myMethod at index 0 has been decorated Executing myMethod with param: test
We have learned to create custom decorators in TypeScript. However, users can use the pre-defined decorators for various purposes like debugging the code, etc.
”;