How TypeScript Decorators really work | TypeScript in a Nutshell

[Music] i've been dealing with decorators quite a bit lately and somehow i've been wondering how these things even work you can find decorators in many dependencies like type home type graphql or view property decorator these decorators allow us to write more elegant code by the end of this video you will know exactly what decorators are in typescript and how they work internally let's first clarify what decorators are in typescript you will see decorators in many libraries and they all start with an ad character followed by the name of the decorator the point behind these decorators is nothing more than simply noting meta information for certain types with the help of decorators we can add information to a library the important thing to understand is that we do not necessarily need decorators to implement logic or to implement things this is really just some tactical sugar so that users of your code or library can reuse certain logic quite easily we can use these decorators anywhere for example we can write a decorator on top of a class next to a function parameter or on top of a simple function here as always the execution is from top to bottom that means that the class decorator is executed first and then chronologically the decorators that follow it in addition we can also use several decorators at the same time with for example a class it is funny though that in typescript decorators are nothing more than simple functions and that is exactly how we declare our own decorators they are different types of decorators we are going to take a closer look at them now in parallel we will also look at the compiled javascript code let's first look at the rough setup for the typescript examples we have a simple npm project and we will use the following dependencies typescript ts node and nodemon we also have a script that executes the index file in our source folder in addition we have a ts config file here it is important that we set the option experimentaldecorators to true in the compiler options this option then allows us to use our decorators in the typescript project the first type of decorators is the class decorator as the name suggests these decorators allow us to execute meta information and logic over a class for this i've prepared a simple class and we can think of it as a simple view or web component now i'm keeping this example really simple to not mess things up let's define a new function and call it component here we define a parameter of the type function since a class is nothing but a function in javascript we get the whole class as a parameter of our decorator as an example we can add a simple property to the prototype chain now we can write this decorator over our class with the add symbol if we now create a new class and then output id there we see that everything now works perfectly here the property id in our class is overwritten with the value in the decorator function now we have successfully implemented a simple decorator what if this decorator for example expects an object as a parameter for this we will use a decorator factory a decorator factory is defined by returning a function in the decorator function here we have the function or more specific the class asset type for the parameter since we want to set the static variable element id we let the function type inherit from the types of the class in the decorator function itself we can now expect an object as a parameter and can then add the associated id in the decorator factory when we apply the decorator we can then define an object where we again define the id if you look closely at the result we see that everything worked fine and we can now manipulate a static variable in a class via a decorator let's take a quick look at the compiled code for this if we compile the whole fun in javascript we see that we have a decorate function this function is responsible for the whole assignment and allocation of the decorators on the other hand we then use this decorate function again in the test class to define our decorators we can see that this is an array and so we can simply use multiple decorators at the same time i hope you know something about the class decorators and how to define and use them let's jump directly to the next decorator the method decorator allows us to define decorators for certain functions for this we implement again a simple function and this function expects three arguments the first argument is the target or the current prototype object in our case this would be the prototype chain of our test object after that we have the property key this is a simple string and simply represents the name of the function as a final third parameter we have the descriptor this descriptor simply describes the method of course we can also make a decorator factory out of it but we will skip this step for now now we can manipulate the actual value of the property descriptor by overriding the value property this value property represents the actual function therefore we could execute this function to find out the return value of the function itself this value property is a function and it can expect different arguments of different types logically we can also pass different types and a different number of arguments to a function as parameters for the sake of testing we just return a normal string to the function this return value then reflects the result of the actual function this arcs parameter contains all our parameters that we pass when calling the function after executing we can see that it successfully outputs what we expected method decorators are relatively easy to understand i really recommend that you test them for yourself next let's take a look at the property decorators with the help of these property decorators we can pass different properties or property meta information let's define a simple function again this function now expects the target of our property decorator which again reflects the object and then the name of the property in this function we can now pass on or manipulate things for example if we set the value of the property or even call it somehow for this example we define a setter and get a function and then we just output something in the setup function we also set the current value to the new value the next step is to tell the object that we have to find these two functions here for this we set the properties get and set of the object to the defined functions this get property is called as soon as the property itself is called somehow the set property is therefore self-explanatory and is called accordingly as soon as a value is set for this property let's test it out and we see that we get some logging messages back there that is actually all there is to the property decorator the so called parameter decorator can be applied to our parameters in a function for this we define a function again and this time it expects three arguments we have again the target then the method name and then the position of the perimeter in the argument array to keep things simple we just output the index and the method name as always you can implement your decorator logic here if we start everything we see the output which of course is what we expect otherwise feel free to compile the code again and we will see that all decorators are created and applied with the help of the decorate function that is about it for all our decorators there are different use cases for decorators a popular example would be to use decorators for logging i've already demonstrated a small example here using the property decorator other use cases could be caching monitoring business rules or simple data validation i guess these things aren't really hard to understand but personally i've never really had to implement them myself it is just syntactical sugar for the users of your library if you want another practical example feel free to post it in the comments and i will of course make an extra video about it if you have any questions feel free to ask them in the comments thanks for watching and i will see you in the next video you

Channel: Code with FloW

Views: 1,820

Rating: 4.681818 out of 5

Keywords: typescript, typescript tutorial, typescript decorators, typescript class decorators, typescript parameter decorators, typescript property decorators, typescript method decorators, typescript basics, javascript, javascript decorator

Id: oF7m5ibwzAw

Length: 8min 45sec (525 seconds)

Published: Fri Apr 23 2021