TypeScript Decorators

One of the main benefits of working in TypeScript is that it lets developers use modern standards within their source code today. Tools like destructuring, rest and spread operations, and classes make it easier to define structures and work with data.

TypeScript also provides support for ES.Next Decorators, giving developers an important tool for defining frameworks and reusable structural patterns. Today we will explain what decorators are, how they can be used to improve your projects, and how to start using them in
TypeScript

What are Decorators?

Decorators are simply functions that modify a class, property, method, or method parameter. The syntax is an “@” symbol followed by a function.

@readonly
class Person {
    name: string;
    isAdmin: boolean;

    constructor(name:string, admin: boolean) {
        this.name = name;
        this.isAdmin = admin;
    }
}

The @readonly decorator is a class decorator; it is passed a reference to the constructor function and returns a new constructor function that extends its behavior.

function readonly<TFunction extends Function>(Target: TFunction): TFunction {
    let newConstructor = function () {
        Target.apply(this);
        Object.freeze(this);
    };

    newConstructor.prototype = Object.create(Target.prototype);
    newConstructor.prototype.constructor = Target;

    return <any> newConstructor;
}

With this very simple syntax we are able to apply a concept to any class or element. Decorators can be used to modify the behavior of a class or become even more powerful when integrated into a framework. For instance, if your framework has methods with restricted access requirements, it would be easy to write an @admin method decorator to deny access to non-administrative users, or an @owner decorator to only allow the owner of an object the ability to modify it.

class CRUD {
    get() { }
    post() { }

    @admin
    delete() { }

    @owner
    put() { }
}

In the above example, @admin and @owner would check against a singleton user object to see if the user had the proper privileges, and throw an exception if they did not. The specific implementation of each method would vary based on the conditions suitable for your application.

Decorators are a powerful mechanism for defining behaviors, eliminating boilerplate code, and building frameworks. They offer developers a way to describe functionality using higher-order functions that mutate and transform a class.

Using Decorators in TypeScript

Today, decorators are still a stage 1 proposal for the ES2016 specification. While there are several steps before this is accepted as part of the formal JavaScript language specification, thanks to transpilers like TypeScript and Babel projects can use them now to improve developer productivity.

To use decorators with TypeScript pass the --experimentalDecorators flag the TypeScript compiler or withing your tsconfig.json. It’s as simple as:

tsc --experimentalDecorators main.ts

Learning More

There are many examples on using decorators that can help you get started including an example decorator and metadata usage with Grunt and Intern support, Cocktailjs — an annotation library for Node.js, and Angular 2. Decorators are an exciting new feature and hold a lot of promise for improving your developer experience. We encourage you to start looking into them today!

We also have a much more in depth ES6 and TypeScript fundamentals workshop available. The workshop will be very focused on learning the most important features and nuances of ES6 and TypeScript in a short amount of time. To register, see our complete workshop schedule.

Or if you are starting to use ES6 and/or TypeScript in your development efforts today, and need a little help with decorators or other concepts, our Enterprise JavaScript Support may be an option to consider.

Contact us to discuss how we can help your organization learn more about ES6 and TypeScript.