image
Method Decorators
Start course
Difficulty
Beginner
Duration
12m
Students
446
Ratings
4.3/5
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

As well as decorating a whole class, we can decorate methods inside one. A method decorator can be used just before the declaration of a method in a class. They're applied to the property descriptor of the method, and like a class you can use it to observe, modify, or replace a method definition.

Method decorator expressions are called with three arguments. The first is the prototype of the class for an instance method or the constructor for a static method. The second is the name of the method. And the third is the property descriptor for the method. The property descriptor will be set by any value returned by the decorator.

The code we have ensures that a method of a class cannot be accidentally overwritten by making it read only. This is done by setting the enumerable and writable property descriptors to false. These are true by default. Read-only decorator takes a target, a method name, and a descriptor as arguments.

It then sets the writable and enumerable properties of the method to false, meaning it can't be changed by other code. In the class we decorate the sayHello method with the read-only decorator. When we have an instance of the class, we can call the method. But if we try and change the method by reassigning it, we'll get a runtime error.

The error highlighted on line 13 is because false is not a function, not because we shouldn't be reassigning sayHello. You can see that the compilation error shows this in the console too. We run the file.

As you can see the sayHello method was not changed after the declarations. It still logs out Hello twice. Is it got you here? TypeScript won't pick up on the enumerable era. It happens at runtime.

JavaScript will fail silently, but if you wanted to worry, you need to have strict mode enabled in compilation. We can add the always-strict flag to the end of the compilation then run the JavaScript again. And this time it will fail. For the decorator we could have created a factory here, that would have allowed us to pass in true or false, making the decorator more flexible. 

Each time it is applied to a method, would change whether it's read only or not. The method can have more than one decorator, which will execute when the method is called. Again, this is a fairly simple example we've got here and you can do more with method decorators. Again, we'll direct you towards the documentation and online searches to find out more.

Lectures

About the Author
Students
22514
Labs
6
Courses
29
Learning Paths
16

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