Programmingempire

In this post on Introductory Examples of Decorators in TypeScript, I will explain the different types of decorators with example code. Meanwhile, if you want to learn the basics of Decorators in TypeScript, then you can refer to my earlier post here.

To begin with examples, first, we will consider the Class Decorators. Furthermore, we can have more than one decorator associated with a construct. Moreover, we can use decorators with more than one class member at a time.

Examples of Class Decorators

Generally, a class also contains a constructor. However, we can modify it using the Class Decorator. Consider the following example.

As shown below, we have a class called Student and there are two decorators a and b respectively. It is worthwhile to mention that the class decorators will execute once initially for all the instances of the class. Moreover, b will execute before a and then the constructor of the class gets executed.

function a(s1:string):ClassDecorator{
	return function():void{
		console.log(s1);
	}
}
function b(s1:string):ClassDecorator{
	return function():void{
		console.log(`All the Students belong to ${s1} University!`);
	}
}

@a("Representing Student Records")
@b("Model")
class Student
{
	sid:number;
	sname:string;
	course:string;
	constructor(i:number, n:string, c:string)
	{
		this.sid=i;
		this.sname=n;
		this.course=c;
		console.log("Student Information: ");
		console.log(`Student ID: ${this.sid}, Student Name: ${this.sname}, Course: ${this.course}`);
	}
}

let ob1=new Student(11, "Abhay", "MCA");
let ob2=new Student(91, "Simran", "BCA");

Output

Examples of Method Decorators

Likewise, we can use Method Decorator for the methods of a class. Let us see an example as shown below.

As an illustration, let us define a class Student and add some properties to it. For instance, we have sid, sname, course, m1, m2, and m3 properties, where the last three properties indicate the marks of the student in three subjects. Also, define a constructor and initialize these properties. After that, add a method called showTotal() in the definition of the class that computes and displays the total of m1, m2, and m3.

Another key point in defining a method decorator is the signature of the decorator function that takes three arguments. Firstly, the target indicates the constructor of the class or the prototype of the class depending on whether it is a static method or an instance method. Secondly, propertyKey refers to the method name. Lastly, descriptor refers to the Property Descriptor of the method.

Finally, let us create two instances of the class and call the method showTotal(). As can be seen, the decorator function is executed once for all method calls.

function d1(){
	return function(target, propertyKey:string, descriptor:PropertyDescriptor):void{
		console.log("Computing Total Marks of the Student...");
	}
}
class Student
{
	sid:number;
	sname:string;
	course:string;
	m1:number;
	m2:number;
	m3:number;
	constructor(i:number, n:string, c:string, m1:number, m2:number, m3:number)
	{
		this.sid=i;
		this.sname=n;
		this.course=c;
		this.m1=m1;
		this.m2=m2;
		this.m3=m3;
		console.log("Student Information: ");
		console.log(`Student ID: ${this.sid}, Student Name: ${this.sname}, Course: ${this.course}`);
	}
	@d1()
	showTotal(){
		let t=this.m1+this.m2+this.m3;
		console.log(`Total Marks Obtained: ${t}`);
	}
}

let ob1=new Student(11, "Abhay", "MCA", 56, 30, 90);
ob1.showTotal();
let ob2=new Student(91, "Simran", "BCA", 88, 68, 59);
ob2.showTotal();

Output

Summary

In this article on Introductory Examples of Decorators in TypeScript, I have explained the concept of decorators using several examples that have covered different decorator types. Also, examples of multiple decorators are provided in this article. In the next post, I will explain the Property Decorator with an example.

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET