Types of TypeScript Decorators
Decorators can extend the functionality of classes, methods, properties, accessors, and parameters. Typescript uses the following Decorator types to accomplish this :
- Class Decorators
- Method Decorators
- Accessor Decorators
- Property Decorators
- Parameter Decorators
Class Decorators
The class decorators are responsible for decorating a class or, in other words increasing the functionality of a class by wrapping a decorator over it.
Function decorator (constructor:Function) {
console.log(“logging data…”);
console.log(constructor);
}
@decorator
Class Student {
name=”Manas”;
constructor( ) {
console.log(‘Creating Object…’);
}
}
const student=new Student();
console.log(student);
Output
logging data…
Class Student {
constructor( ) {
this.name=”Manas”;
console.log(‘Creating Object…’);
}
}
Creating Object…
Student{name:”Manas”}
The class decorator function takes the class constructor function as its argument to increase its functionality.
Also, the TypeScript decorator function was initialized even before the new class was instantiated.
Even if we were not to create a new class object, the TypeScript decorator function would still execute.
Function decorator (constructor:Function) {
console.log(“logging data…”);
console.log(constructor);
}
@decorator
Class Student {
name=”Manas”;
constructor( ) {
console.log(‘Creating Object…’);
}
}
//const student=new Student();
//console.log(student);
Output:
logging data…
Class Student {
constructor( ) {
this.name=”Manas”;
console.log(‘Creating Object…’);
}
}
Method Decorators
The method decorator is attached before a method is declared and has three arguments to help observe, replace or modify the method declaration. These arguments are:
- Target: Usually points to the prototype of a class or its constructor function
- Property key: Points to the name of the method that is attached to it.
- Descriptor: Acts as a Property Descriptor of the method.
The Property Descriptor is defined as:
interface PropertyDescriptor {
configurable?: boolean;
enumerable?: boolean;
value?: any;
writable?: boolean;
get?(): any;
set?(v: any): void;
}
A practical example of a method decorator is as follows
function methodDecorator(value: string) {
return function (target: any,propertyKey: string,descriptor: PropertyDescriptor) {
console.log(target);
console.log(propertyKey);
console.log(descriptor);
console.log(value)
};
}
class Greeting {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@methodDecorator("Welcome")
greet() {
return "Hello, " + this.greeting;
}
}
let a =new Greeting("Parth");
console.log(a.greet())
Output:
Greeting: {}
"greet"
{
"writable": true,
"enumerable": false,
"configurable": true
}
"Welcome"
"Hello, Parth"
FAQs
-
How do I create a decorator in TypeScript?
To create a decorator in Typescript, a function with an argument set as the constructor function of the target class has to be created. Then, using a special syntax @expression where expression is the function name is to be placed before the target class or method.
-
How many decorators are there in TypeScript?
Typescript supports five types of decorators:
- Class Decorators
- Method Decorators
- Accessor Decorators
- Property Decorators
- Parameter Decorators
Read Also - Difference between argument and parameter
Key Takeaways
We learned about Typescript's Decorators, Class, and Method Decorators and how their syntaxes are used from this article. We also learned how TypeScript decorators improve code readability and help introduce functions in classes in the form of TypeScript decorators. We looked into how the property descriptor argument can observe, replace and modify a particular class method. However, this isn't enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about Typescript and its intricacies, check out the articles on Typescript or enroll in our highly curated Web Development course.