In this lecture, we're finally going to write a decorator for this demonstration.
We will be working on a new file in your project.
Create a file called Decorator.
It's.
Let's say we were creating a restaurant application.
Restaurants need menus.
I think it would make sense to create a class for each item on the menu.
For our first menu item, we will create a class called Pizza.
We will create another menu item with a class called hamburger.
Both classes will have a property called ID with the string type.
Great.
We've got a couple of classes for our menu, but neither have an ID without an ID.
It would be difficult to identify our menu items.
One solution would be to add properties directly to our class.
However, another solution would be to use decorators.
Decorators have the power to override the class definition.
Let's try using them to assign IDs to our classes.
A decorator is written as a function above the two classes.
Define a function called menu item.
The name of our decorator is Pascal cased.
It's not necessary to write the names of decorators in Pascal case, but it is standard practice.
Two parameters must be added to your decorators.
They are called value and context.
Decorators can be applied to classes, methods or properties.
The value parameter stores the value of the definition it is applied to.
Whereas the context parameter contains information of the definition itself, such as if the decorator
was applied to a class or method, the next step is to return a value.
As mentioned earlier, decorators can override values.
In our case, we're overriding the class.
The return value of the function is based on the type of definition it's been applied to.
In our code, since this decorator will be applied to classes, we must return a class.
Return.
The following class extends value.
In most cases, you're most likely not going to override the entire class.
Sometimes you might want to extend the existing class to define additional properties or methods.
Whatever is returned by our function is going to be applied to our class.
Let's give that a try.
Decorators can be applied by adding the at symbol followed by the name of the decorator.
We will apply the menu item decorator to the pizza class.
Decorator sit on top of the class they're applied to.
Just like that.
We've created our first decorator.
It doesn't do much.
So let's modify the ID in the class from the decorator function.
We're going to set the ID property to A, B, c.
By adding properties to the target object, they'll be applied to our classes.
Let's test if this is true.
At the bottom of our classes, let's log the ID of the pizza class after creating a new instance.
We can verify our code is working by compiling it.
Switch over to the command line.
Let's compile our script with the Npx TSC command.
We aren't going to provide a file name to the command if we don't provide a file name.
TypeScript will compile every file we have in our directory.
Everything should work after compiling the script.
Let's test our script by running the node decorator command.
The ID has been set to ABC.
Our decorator modified this property, as you can see.
Decorators are very powerful.
They allow us to modify and add properties to a class.
We can take this a step further by passing on values to our decorators.
At the end of the day, decorators are just functions like any other function.
We pass in values to configure the behavior of the decorator.
Back at the top of the file, we're going to modify our function.
We need to use a closure for accepting properties.
Let me show you what I mean.
The menu item function will return the function for modifying the class.
The outer function will be responsible for accepting values, whereas the inner function will be responsible
for interacting with the targets in our outer functions parameters.
We can accept incoming data.
We will have one parameter called item ID with the string type.
Next in the inner function, we will set the ID property to the item ID arguments.
After modifying our decorator, we will get an error from TypeScript.
It'll tell us we are calling the menu item decorator incorrectly.
We need to call it like a function inside the parentheses.
We can pass in whatever value we'd like.
In the case of our menu item decorator, we need to pass in a string that will act as an ID.
Let's pass in a, B, c.
Interestingly, decorators are reusable.
Let's apply the same decorator to the hamburger class.
Give it any ID you'd like.
With the help of decorators, both classes have their IDs set by the decorator.
We have a simple example, but imagine if we wanted to add dozens of methods and properties to multiple
classes by using a decorator.
Extending a class is easy.
Hopefully it's becoming clear as to why you may want to use decorators.
They allow us to extend the class with properties and methods.
Another benefit of decorators is being able to apply them directly to properties, methods and accessors.
We don't have to apply them to the overall class.
The syntax is different based on the target.
For that reason, we won't be diving into how to create decorators for different targets.
The main point of this lecture is to understand how decorators work.
They're heavily used in Angular.
It's unlikely we will be writing decorator functions.
Instead, we will be using decorators defined by Angular.
The decorators from the Angular framework will cover most of our needs.
As long as you understand what decorators do.
You should be good to go.
This is the last lecture on TypeScript.
There are so many features in TypeScript that we haven't got to cover.
However, these features will be enough to get you through the angular course.
As we progress through the course, we will cover additional features.
I can't wait to get started with Angular.
I'll see you in the next section.