TypeScript - Decorators

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

play-arrow
Simple Decorators and Decorator Factories
Overview
DifficultyBeginner
Duration12m
Students20
Ratings
5/5
starstarstarstarstar

Description

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

Prerequisites

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).

Feedback

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

Transcript

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.

Lectures

About the Author

Students1293
Labs8
Courses29
Learning paths5

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics