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.
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.
The accessor decorators are used to decorate getting set methods in a class. They work on the property descriptor and can be used to observe, modify or replace an accessor definition. This can be particularly useful in hiding properties from iterators, by setting the enumerable value.
We create a decorator factory to allow the setting of a property to true or false. The expression returned is pretty much the same as the method decorator, taking a target property name and a property descriptor as arguments. We then set the enumerable property of the descriptor.
The class has two private fields and getting set for them. You'll notice that the get functions are decorated. User name is true, password is false. We then create an instance of the class on line 27, setting the username. We also access password and set its value on line 29 and then log out. On line 32 we Create a loop, through each of new users innumerable properties, locking the name of the property and its value out.
Compiling and running there shows, that the enumerable property of each has been defined, for its set function. You can see that the password is not included in the foreign iterator running, or because enumerable was set to false. So that's the different types of decorators available in TypeScript, and an overview of how they work.
It's quite probable that you'll never write your own decorator, but they are used extensively in Angular, and some of the frameworks and libraries. So it's good to know about how they work. There's more information and examples online. Don't forget, unless it becomes a concrete part of the specification, the implementation may change. But for now, go and get some practice with them.
Lectures
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.