I'm talking about a decorator which you can add which automatically binds the this keyword so that we
don't have to call bind here.
Now obviously calling bind here is not a big thing and there is nothing wrong with it but we also want
to practice what we learned and if we have to do it as in many many places across our app.
Having a decorator which just can add might actually be easier.
So let's get rid of bind this year at instead above the class here.
I'll add the auto bind decorator and I'm just adding some comments here to keep this file organized
at least a bit.
Project input.
Class.
So what does a decorator a decorator is a function.
Right.
And you can define it either with the function declaration here or as a function expression so you're
a will use a function declaration and I'll name it all to bind.
NAME IS UP TO YOU AND THIS decorator will receive free arguments.
The target the method name to which it is bound.
Because I'm going to create a method decorator here and also the descriptor of that method property
descriptor because methods in the end are just properties properties which hold functions.
Now why is this a method decorator.
Because the ideas that we can add it to submit handler like this and be done with it.
That's the idea.
Now we're not entirely there yet but this is how it should work in the end now to make it work.
Let's go back to our function up there and what has to go into the function body then.
Well in there are first of all want to get access to the original method with descriptor dot value so
that we store the method which we originally defined then on when I create my adjusted descriptor here
which is the object of type property descriptor actually where configurable should be set to true so
that we can always change it and where we then need to gather and indent gather here which should be
executed when you try to access the function we will set up the bound function year by using the original
method which we're extracting up there and calling bind this on it then I want to return that bound
function and that should be all and overall of course I will therefore return the adjusted descriptor
in that method decorator.
Now we get an error with that on the Submit handler that experimental support for decorators is a feature
which basically needs to be enabled.
So we should go to the T as config file and then there if you scroll down you should find dead experimental
decorators option just comment that in and add a comma in front of it save that and then restart these
types of compilation process now.
It still shows me some errors here if I expanders as the method name is declared but its value is never
read an apt yes line for is referring to this here I got this argument which I receive here which actually
never use same is true for a target I never use that.
Now there are two ways to solve this the one way is to go to the TS con thick and loose and our strictness
rules here no unused parameters.
If we set this to faults we're actually allowing unused parameters so it would be one thing or you use
special names underscore and underscore to does actually is a hint for TypeScript and JavaScript.
Dad you're aware Dad you're not going to use these values but you need to accept them because you need
argument thereafter.
If you now say if this is compiles without errors and if we go back and enter hallow here and submit
this it still works.
Now thanks to our order bind decorator which hopefully also shows that this decorator can have some
real use.
Now of course here it's actually a bit more work than just calling bind.
But imagine this being used on more and more methods which all have to be bound not having to call bind
this manually can then reuse save you some time and also prevent some potential errors in cases where
you just forgot it.