Decorators in TypeScript

3Decorators are an experimental feature of TypeScript and, to an extent, of JavaScript itself. They are a concept borrowed from Python, and a way to modify classes using higher order functionality.

The idea is that you pass the class/function/attribute through a function and the result becomes the class/function/attribute.

As an example, if you make a @final decorator and have the code…


@final class Person { }

The result will be something like this…

var _person = new function ();
var Person = final(_person);

The idea behind decorators is two fold:

  1. You can add metadata to your prototypes for your internal operations to use.
  2. You can use the information from decorators to register the objects within your system.

Angular 2 used the second point in order to implement most of their functionality.

Using them isn’t difficult, the only problem is the lack of documentation.

The two important decorator types I use are class decorators and field decorators. They have two methods of using them, and that’s with or without parens.

Class Decorators

Class decorators have a single parameter, which is the class itself. Through that parameter you can access the prototype of the class and modify it, or you can make changes to the class object itself.

If you use parens in the decorator ala


@validator()

the function becomes a function factory. You must return another function in the main decorator function. To make it simpler see below:


function validator() {
    return function (target) {
        target.prototype.hasValidation = true;
    } 
}

So the function you return is the actual decorator. The calling function is a factory. This means that you can pass whatever extra arguments you want into the calling decorator and have them be available in the actual decorator.

Field Decorators

Decorators on fields are a bit special, they have two parameters. The first being an object created using the prototype for the function. This means that you can access the actual prototype by skipping through the object a bit.


obj.constructor.prototype.hasValidation == true

Field decorators, just like class decorators can be called with parens/arguments. They also work the same way in that they become function factories.

Conclusion

Decorators can be very powerful. Angular 2 uses decorators in such a way that they can’t currently be separated out of Angular 2, but they can also be used for data validation ala C# EF model attributes. The only current problem is the lack of use outside of Angular 2.

The reason being however is that decorators in TypeScript are an experimental feature. You can’t even compile them without a special flag set for TSC. Until it becomes an official feature of TypeScript people just aren’t going to use them. The more people that use them however, the more it will tell the TypeScript team that people want to use it.

So in short, use decorators.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s