Method Decorators

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Typescript: Zero to Hero
course-steps
8
certification
2
play-arrow
Start course
Overview
DifficultyBeginner
Duration12m
Students37
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

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

Students1892
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