Navratri Sale: Get Upto 30% OFF on Live Training! Offer Ending in
D
H
M
S
Get Now
Decorators in TypeScript

Decorators in TypeScript

22 Dec 2023
Intermediate
477K Views
3 min read
Learn via Video Course & by Doing Hands-on Labs

TypeScript Programming Course

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 Typescript skill challenge to evaluate yourself!

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

GET FREE CHALLENGE

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Full-Stack .NET Developer Certification TrainingOct 13SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
ASP.NET Core ProjectOct 19SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
.NET Solution Architect Certification TrainingOct 20SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
.NET Microservices Certification TrainingOct 20SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
ASP.NET Core Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
Microsoft Azure Cloud Architect with AINov 10SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Amit Kumar (Software Engineer And Author)

Experienced Software Engineer with a demonstrated history of working in the professional training & coaching industry. Skilled in Asp.net MVC, Angular, Language Integrated Query (LINQ), SQL, C++, and HTML. Strong engineering professional graduated from Sathyabama University.
Accept cookies & close this