Decorators in TypeScript

Decorators in TypeScript

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

TypeScript Programming Course


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.


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


class ItemList {
 itemArray: Array;
 constructor() {
 this.itemArray = [];
 Add(item: string): void {
 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.


class Company {
 name: string = "Dot Net Tricks";

let company = new Company(); = 'TCS'; // you can't change it's name
console.log(; // '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.


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.
Angular Certification Course Jun 22 SAT, SUN
Filling Fast
09:30AM to 11:30AM (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 MVC, Angular, Language Integrated Query (LINQ), SQL, C++, and HTML. Strong engineering professional graduated from Sathyabama University.
Accept cookies & close this