Typescript

How to Create a Custom Decorator in TypeScript

TypeScript comes with the “decorators” that help in the addition of metadata, to the created classes, properties, and methods. They execute the specified logic defined in its body section when its associated content/element is accessed. It is considered the best method to modify the behavior of the class without making changes in itself. They can be created easily in the format of a function as per requirement.

This guide elaborates on the complete procedure to create a custom decorator in TypeScript.

How to Create a Custom “Decorator” in TypeScript?

TypeScript utilizes five types of decorators such as “class”, “method”, “property”, “accessor”, and “parameter”.

This section carries out the essential steps to create a custom class decorator by following the given steps.

Step 1: Check Prerequisites

Make sure that the “TypeScript” is installed in your project set-up or not. To perform this task, run the following command to check the TypeScript version:

tsc -v

 

Here, it can be seen that TypeScript is installed in the current project set-up having the “5.1.3” version.

Step 2: Enable the Decorator

Now, enable the “decorator” support in the project set-up. It can be done in two ways:

Method 1: Command Line

Use the “tsc” compiler with the “–experimentalDecorators” flag to enable the “decorator” support through the command line:

tsc --experimentalDecorators

 

The execution of the above command enables the “decorator” support.

Method 2: Edit the “tsconfig.json” File

Open the “tsconfig.json” file from your project setup and navigate to the “compilerOptions” section. Search “experimentalDecorators” and uncomment it by removing the forward slashes:


Now, press “Ctrl+S” to save the new changes in the file.

File Structure

After enabling the “experimentalDecorators” support, the new compiled “.js” file will be automatically created having the same name as the “.ts”. The project file structure will look like this:


Step 3: Create a Custom Decorator

Now, create/open the file with the “.ts” extension and add the following lines of code in it to create a custom “class” decorator:

function myDecorator(constructor: Function) {
 console.log("MyDecorator Runs Successfully!")
}
@myDecorator
class User{
name: string;
email: string;
constructor(n:string, e:string) {
 this.name= n;
 this.email=e;

}
}
const user= new User('Areej', 'areej@gmial.com')

 
In the above lines of code:

    • The function “MyDecorartor()” declares the class decorator that is applied to the targeted class “constructor” with the type “Function” as its parameter.
    • After that, specify the class decorator with the “@” special character before the targeted class.
    • Next, create a class named “User” having two properties with the type “string”.
    • The “User” class further includes the method called “constructor” to initialize the class object properties.
    • Lastly, create an object “user” with the “new” keyword having the value of the “User” class initialized properties as its constructor argument.

Step 4: Output

Now, run the compiled “main.js” file by specifying its name with the “node”:

node .\main.js

 

Here, it can be seen that the output shows the successful execution of the created custom class decorator named “myDecorator”.

Conclusion

In TypeScript, to create a “custom decorator”, the user needs to define it as a function and then use it with the “@” keyword. The user can create any type of custom decorator based on its type. By default, the decorator support is not enabled, so first enable it via using the “command line” or the “tsconfig.json” file. This guide deeply explained the complete procedure to create a custom decorator in TypeScript.

About the author

Areej Nadeem

I am a technical author holding a Bachelor’s degree in Computer Science. I am passionate about writing and learning new technologies and sharing my knowledge with the rest of the world.