Decorators in TypeScript : An introduction

What is a Decorator

In this blog we will look into what is the purpose of adding decorators in TypeScript code. We will go through the definition, the implementation and consider this as your go to revision tool for decorators topic.

By definition :

A decorator is a function that can be used to change or modify different property of a class. TypeScript decorators are different from JavaScript decorators. In TypeScript decorators will be used with classes

Let's see how we will use the decorators in class

Create a class in TypeScript

This is a sample Boat class with a pilot method

class Boat{
    color : string = 'red';

    get formattedColor() : string {
        return 'The color of boat is' + this.color;
    }

    pilot() : void{
        console.log('pilotmethod')
    }
}

Now below this class, we will declare a testDecorator function.

Declaring Decorator

// declaring decorator

function testDecorator(target: any, key : string) : void {
    console.log({Target: target});
    console.log({Key : key});
}

We need to learn how to use this testDecorator

Using the decorator

We declared a decorator below our class. Above our method pilot(), we will learn to use this. Follow along

X @testDecorator
pilot() : void {
    console.log('pilotmethod');
}

Notice how we wrote only testDecorator and nothing else.

Follow this if you are seeing this error on line X

1. Go to tsconfig file of your project

2. If you don't have one, write tsc--init in terminal and press enter

3. Now search for 'emitDecoratorMetadata' and 'experimentalDecorators' in your tsconfig.json file

4. Uncomment them and set them to 'true'

"experimentalDecorators" : true,
----
"emitDecoratorMetaData" : true

1. After doing this the error will go

Run the file in terminal after all this

Write ts-node filename.ts in terminal. You should get the following output

{Target: {}}
{Key : 'pilot'}

What does this mean?

We are saying that name 'pilot' of method will be the second argument of the testDecorator.

If we move our testDecorator to the get formattedColor, the Key will now be 'formattedColor'

3rd argument in the decorator

In our decorator we have not included a third argument. Had there been a third argument, it would have been - property descriptor

Remember, decorators are applied only one time when we define the class and not when the instance is created

Changing our code

Now we want that our decorator sends us an error whenever we find one. So for now we will change our pilot() method to throw an error and we are renaming our decorator as logError.

We will make use of our third argument in our decorator declaration and it will be of type 'PropertyDescriptor'.

Property descriptor

Property Descriptor is an object that has some configuration options around a property, defined on an object. It is not a part of TypeScript, it is part of ES5 JavaScript.

When we are working with the Property Descriptor specially with methods, we can have the following options which will be boolean ie. set true or false

1. writable - whether this property can be changed

2. enumerable - whether or not this property get looped over by a for..in loop

3. value - current value

4. configurable - property definition can be changed and property can be deleted

Property Descriptor part was a bit confusing for me. Please go through this material again and again to get an understanding on it.

Thanks for your time.