Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:14Length:1.2 hours
Typescript fundamentals 400x277
  • Overview
  • Transcript

2.7 Decorators

Hi and welcome back to TypeScript Fundamentals. In this lesson, we are talking about a complicated, but highly useful topic, decorators. Decorators are an interesting concept in TypeScript and computer science in general. Day as the name says, decorate a class. Function, property or even function parameter by adding additional functionality. This seems pretty forward and the application of a decorator is actually. You simply write an at symbol followed by the name of the decorator in front or in the line above the function class, or property you want to decorate. For each decorator, there is a corresponding function that decorates said entity. The input of those decorators, essentially is the decorated entity and they wrap around it somehow. It's very abstract and difficult to explain in theory, so why don't I show you an example of a function decorator? This decorator locks the method whenever it's called without anybody doing anything. Here I have a calc class that has a method sum, which combines three inputs and adds them together. I'm going to decorate this function with a logMethod decorator. A function or rather method decorator has three inputs. The target, the key and the property descriptor. The target in our case is to construct the function. For an instance function, it would be the class prototype. The key is simply the name of the function and the property descriptor is the actual function in a special form. In our log function, we are going to change the functional way that allows us to intercept result of it before it's returned. But first, let's get the original function as the descriptor's value, then we can modify the value by defining a new function that will accept any arguments of any type. This is important, because a decorator is supposed to be very generic. We don't really care about what the parameters are, we just want to capture them. Now, it's time to call the function and capture the output. I'm going to use the apply function on the original to execute it and pass on the arguments. Before I return the result in my function, so it behaves exactly like the function I intercepted. I want to log the function's name, the input parameters and the result. Finally, I can return the alter descriptor. And now, I'm going to compile and execute it in the shell. It shows the locked statement of the sum with the three input perimeters and the output. You can also combine multiple decorators for one entity. For instance, I could add a times two decorator as well that multiplies the inputs by two. This is more specific and requires numbers, but I'm going to duplicate the logMethods function and alter it, so the inputs get times by two before the original function is called. Executing this leads to an interesting observation. The log function tells us that the imports of 1, 2 and 3, but the output is 12. The order of the decorators matter. If I swap the two, the log function receives the multiplied values. Depending on what you are trying to achieve with decorators, this might lead to issues and you probably don't know where to look if you knew nothing about decorators. I won't be going into more implementation details about decorators in this course since they can be quite complicated to create. Decorators are however, widely used in frameworks that support it like Angelo. And therefore, you should understand what they do to your classes, functions and properties. To recap, decorators alter the behavior or capabilities of classes, functions, properties or parameters. Decorators only work inside classes. Classes have been added in ECMAScript 6 and decorators will be added to JavaScript in the future. They are currently in the drive stage of the specification process. The order in which you apply decorators matters and can lead to different behavior. In the next lesson, we are looking into advanced types that you might not have seen yet. See you there.

Back to the top