How can I use decorators today?

Question

I see decorators being used today already in some javascript code. My question is really two fold.

First:

If decorators have not even been finalized how is it possible to use them in production code, today? Won't browser support be non-existent?

Second:

Given it is possible to use it today, as some open source projects would suggest, what's a typically recommended setup for getting decorators to work?

Answer 1

You're right, ES2016 decorators are not yet part of the spec. But it doesn't mean we can't use it today.

First let's take a step back and go over "what is a decorator". Decorators are simply wrappers that add behavior to an object. It's not a new concept in javascript (or programming in general), it's actually been around for a while...

Here's a basic example of a decorator that checks permissions:

function AuthorizationDecorator(protectedFunction) {
    return function() {
        if (user.isTrusted()) {
            protectedFunction();
        } else {
            console.log('Hey! No cheating!');
        }
    }
}

Using it would look like this:

AuthorizationDecorator(save);

You see all we're doing is simply wrapping up some other function. You can even pass a function through multiple decorators each adding a piece of functionality or running some code.

You can even find some old articles explaining the decorator pattern in javascript.

Now that we understand decorators are actually something we (javascript community) were always able to do, it probably comes as no shock that really when we utilize ES2016 decorators today they are simply just being compiled down to ES5 code hence why you maintain browser compatibility. So for the time being it is simply syntactic sugar (some really sweet sugar I might add).

As for which compiler to use to convert your ES2016 code to ES5 code, you have some choices: Babel and Traceur are the most popular.

Here's further reading on Exploring ES2016 Decorators.

Answer 2

There are some solutions to use decorators:

• babel - an es next to es5 compiler with support of decorators.
• traceur - another es next to es5 compiler by google.
• typescript - a typed superset of javascript language that supports decorators.

There are some difference how these tools transpile a "modern" javascript to an older one so you can explore it if needed as they have online playgrounds.

Answer 3

@Class decorators support can be enabled in Babel/Traceur

Babel:

$ babel --optional es7.decorators

Source: Exporing ES7 Decorators - Medium

Traceur:

traceurOptions: {
  "annotations": true
}

@Property decorators are not supported

...and since each @Property provides a unique functionality, each requires a different approach to desugaring in ES6/7.

Here's how you use @Inject:

Typescript

exports class ExampleComponent {
  constructor(@Inject(Http) http: Http) {
    this.http = http;
  }
}

ES 6/7

exports class ExampleComponent {
  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }
}

Source: https://stackoverflow.com/a/34546344/290340

Update:

It looks like Babel changed the way decorators are configured and the article is out-of-date. Here's a link to the new approach.

In short; yes you can use @Class decorators in ES6/7; no property decorators aren't supported in ES6/7 so you'll have to use workarounds.