The course is part of this learning path
This module looks at what decorators are and how you can use them in your TypeScript applications.
The objectives of this module are to provide you with an understanding of:
- What simple decorators and decorator factories are
- How to create Class Decorators
- How to create Method Decorators
- How to create Property Decorators
- How to create Accessor Decorators
This learning path is aimed at all who wish to learn how to use TypeScript
We welcome all feedback and suggestions - please contact us at firstname.lastname@example.org to let us know what you think.
So check the latest versions of ECMAScript and TypeScript to be sure. As Angular uses decorators extensively, it's hard to imagine that any released feature would be too far away from the way the current one works. For us to use them, we need to target ES5 with the compiler, and use the experimentalDecorator switch too, if we're going to use the TSC command on the console. You can add these properties to the TS config file, if you're in a scaled environment.
Decorators are a kind of special declaration that can be attached to class declarations, methods, accessors, properties, and parameters. We use the syntax @Decorator where decorator must evaluate to a function that is called at run time with the decorated declarations information. Where a decorator can be used depends on the parameters the function is supplied with.
This is an example of a class decorator. It takes a constructor as its only argument and logs the message to the console. You don't even need to create an instance of the class for the decorator to be run. We'll look at class decorators in more depth soon.
Decorators can be applied to declarations in different ways. To customize the behavior, we need to use a decorator factory like the one shown. A decorator factory is just a function that returns the expression that will be called by the decorator at run time. To demonstrate some code running, we've defined decorator function and a decorator factory.
The decorator function takes an argument of target that's type function, and simply logs out that it was called. This decorates the decorated class on line 12. An execute would provide the output shown. A decorator factory is defined on line 5. This allows the passing of arguments into the decorator function.
In this case, we pass a simple string and log it out in a sentence. The factory returns a decorator function. This takes the target and then executes with full access to any variables passed to the factory. The classes on lines 15 and 18 are decorated with the decorator factory and log out the outputs shown.
The errors that are being highlighted are because of the experimental status of decorators. It's a reminder for us to configure compilation properly, as you can see. If we now go to the console and compile our file using the ES5 target and the experimentalDecorators switch, you can see that we compile without any errors. And running the file that is produced produces the outputs that we suggested in the code.
About the Author