TypeScript - Decorators

Developed with



The course is part of this learning path

Simple Decorators and Decorator Factories

This module looks at what decorators are and how you can use them in your TypeScript applications.

Learning Objectives

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

Intended Audience

This learning path is aimed at all who wish to learn how to use TypeScript


It is essential you understand the face of contemporary web development to attend this course. You should have a good working knowledge of Javascript. Please note: Before attending this class delegates must have a Microsoft account (signing up for one is free).


We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think.


In this module, we'll look at decorators in TypeScript. We want to understand what a decorator is, how we can implement a decorator and a decorator factory, and how we can decorate items in our code. Decorators are used to annotate or modify classes or class members, which is particularly useful given the more traditional class syntactic sugar introduced in ES2015. However, they're a stage two proposal for JavaScript and an experimental feature of TypeScript as we record this.

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
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics