{"id":15173,"date":"2021-06-09T12:20:31","date_gmt":"2021-06-09T10:20:31","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=15173"},"modified":"2022-01-05T20:02:43","modified_gmt":"2022-01-05T19:02:43","slug":"understanding-the-role-of-decorators-in-typescript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/understanding-the-role-of-decorators-in-typescript\/","title":{"rendered":"Understanding the Role of Decorators in TypeScript"},"content":{"rendered":"\n

Decorators in TypeScript <\/a><\/strong>provide a way of programmatically tapping into the process of defining a class. <\/p>\n\n\n\n

Remember that a class definition describes the shape <\/strong>of a class, what properties it has, and what methods it defines. When an instance of a class is created, these properties and methods become available on the class instance. <\/p>\n\n\n\n

Decorators, however, allow us to inject code into the actual definition of a class, before a class instance has been created. They are similar to attributes in C#, or annotations in Java. <\/p>\n\n\n\n

This article is an excerpt from the book,\u00a0<\/em>Mastering Typescript, Fourth Edition<\/em><\/strong><\/a>\u00a0by Nathan Rozentals\u00a0<\/em><\/strong>\u2013 a comprehensive guide for readers to build enterprise-ready, modular\u00a0web applications using Typescript 4 and modern frameworks.\u00a0<\/em>\u00a0<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Decorator overview\u00a0<\/a>
  2. Decorator setup\u00a0<\/a>
  3. Decorator syntax\u00a0<\/a>
  4. Multiple decorators\u00a0<\/a>
  5. Types of decorators\u00a0<\/a>
  6. Decorator factories\u00a0<\/a>
  7. Summary\u00a0<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    Decorator overview <\/h2>\n\n\n\n

    In this section, we will take a look at the general setup and syntax of decorators, what you need to do to enable them, and how they are applied to classes. We will also show how multiple decorators <\/strong>can be used at the same time, and then discuss the different types of decorators. <\/p>\n\n\n\n

    Finally, we\u2019ll take a look at decorator factories<\/strong>, and how we can pass parameters into decorator functions. <\/p>\n\n\n\n

    But before diving into our article, don’t miss the video The perfect cocktail: Java + Typescript<\/strong>, where open-sourcer Manuel Carrasco Mo\u00f1ino – with a long history contributions in projects such as Vaadin, Polymer, GWT or Apache – demonstrates how to develop a 100% type-safe enterprise app, including the back-end, the front-end, and even the data in the wire.<\/p>\n\n\n\n

    [jwp-video n=”1″]<\/p>\n\n\n\n

    Decorator setup <\/h2>\n\n\n\n

    Decorators are an experimental feature of the TypeScript compiler and are supported in ES5 <\/em>and above. In order to use decorators, you need to enable a compile option in the tsconfig.json file. This option is named experimentalDecorators, and needs to be set to true<\/em>, as follows: <\/p>\n\n\n\n

    { <\/p>\n\n\n\n

        “compilerOptions”: { <\/p>\n\n\n\n

            “target”: “es5”, <\/p>\n\n\n\n

            “module”: “commonjs”, <\/p>\n\n\n\n

            “strict”: true, <\/p>\n\n\n\n

            “experimentalDecorators”: true,<\/strong> <\/p>\n\n\n\n

            “skipLibCheck”: true, <\/p>\n\n\n\n

            “forceConsistentCasingInFileNames”: true <\/p>\n\n\n\n

        } <\/p>\n\n\n\n

    } <\/p>\n\n\n\n

    Here, we have set the compiler option named experimentalDecorators to true. This will allow the use of decorators within our TypeScript code.  <\/p>\n\n\n\n

    Decorator syntax <\/h2>\n\n\n\n

    A decorator is a function that is called with a specific set of parameters. These parameters are automatically populated by the JavaScript runtime<\/strong>, and contain information about the class, method, or property to which the decorator has been applied. <\/p>\n\n\n\n

    The number of parameters, and their types, determine where a decorator can be applied. To illustrate this syntax, let\u2019s define a class decorator<\/em>, as follows: <\/p>\n\n\n\n

    function simpleDecorator(constructor: Function) { <\/p>\n\n\n\n

        console.log(‘simpleDecorator called’); <\/p>\n\n\n\n

    } <\/p>\n\n\n\n

    Here, we have a function named simpleDecorator, which has a single parameter named constructor of the function type, which logs a message to the console, indicating that it has been invoked.<\/p>\n\n\n\n

    This function, due to the parameters that it defines, can be used as a class decorator function and can be applied to a class definition<\/em>, as follows: <\/p>\n\n\n\n

    @simpleDecorator <\/p>\n\n\n\n

    class ClassWithSimpleDecorator { <\/p>\n\n\n\n

    } <\/p>\n\n\n\n

    Here, we have a class named ClassWithSimpleDecorator that has the simpleDecorator decorator applied to it. We apply a decorator using the \u201cat\u201d symbol (@), followed by the name of the decorator function. Running this code will produce the following output<\/em>: <\/p>\n\n\n\n

    simpleDecorator called <\/p>\n\n\n\n

    Here, we can see that the simpleDecorator function has been invoked. What is interesting about this code sample, however, is that we have not created an instance of the class named ClassWithSimpleDecorator as yet. <\/p>\n\n\n\n

    All that we have done is specify the class definition, added a decorator to it, and the decorator has been called by the JavaScript runtime automatically.  <\/p>\n\n\n\n

    Not having to wait for the creation of an instance of a class tells us that decorators are applied when a class is defined. Let\u2019s prove this theory by creating a few instances of this class<\/em>, as follows: <\/p>\n\n\n\n

    let instance_1 = new ClassWithSimpleDecorator(); <\/p>\n\n\n\n

    let instance_2 = new ClassWithSimpleDecorator(); <\/p>\n\n\n\n

    console.log(`instance_1 : ${JSON.stringify(instance_1)}`); <\/p>\n\n\n\n

    console.log(`instance_2 : ${JSON.stringify(instance_2)}`); <\/p>\n\n\n\n

    Here, we have created two new instances of ClassWithSimpleDecorator, named instance_1 and instance_2. We then log a message to the console to output the value of each class instance. The output <\/em>of this code is as follows: <\/p>\n\n\n\n

    simpleDecorator called <\/p>\n\n\n\n

    instance_1 : {} <\/p>\n\n\n\n

    instance_2 : {} <\/p>\n\n\n\n

    Here, we can see that the simpleDecorator function has only been called once, even though we have created two instances of the ClassWithSimpleDecorator class. <\/p>\n\n\n\n

    Decorators are only invoked once, when a class is defined. <\/p>\n\n\n\n

    Multiple decorators <\/h2>\n\n\n\n

    Multiple decorators<\/strong> can be applied one after another on the same target. As an example of this, let\u2019s define a second decorator function as follows: <\/p>\n\n\n\n

    function secondDecorator(constructor: Function) { <\/p>\n\n\n\n

        console.log(`secondDecorator called`); <\/p>\n\n\n\n

    } <\/p>\n\n\n\n

    Here, we have a decorator function named secondDecorator, which also logs a message to the console once it has been invoked. We can now apply both simpleDecorator (from our earlier code snippet) and secondDecorator as follows: <\/p>\n\n\n\n

    @simpleDecorator <\/p>\n\n\n\n

    @secondDecorator <\/p>\n\n\n\n

    class ClassWithMultipleDecorators { <\/p>\n\n\n\n

    } <\/p>\n\n\n\n

    Here, we have applied both decorators to a class named ClassWithMultipleDecorators. The output of this code is as follows: <\/p>\n\n\n\n

    secondDecorator called <\/p>\n\n\n\n

    simpleDecorator called <\/p>\n\n\n\n

    Here, we can see that both of the decorators have logged a message to the console. What is interesting, however, is the order in which they are called.  <\/p>\n\n\n\n

    Decorators are called in the reverse order of their appearance within our code. <\/p>\n\n\n\n

    Types of decorators <\/h2>\n\n\n\n

    Decorators, as mentioned earlier, are functions that are invoked by the JavaScript runtime when a class is defined. Depending on what type of decorator is used, these decorator functions will be invoked with different arguments. Let\u2019s take a quick look at the types of decorators, which are: <\/p>\n\n\n\n