@@rc3043 I've used Java spring boot in few projects and Java Annotations looked good enough. what's the problem there? can you tell me, so my future self can be saved from troubles?
@@monarch0243 Just getting a simple Annotation to work is a pain in the butt. Where ein ts and c# you just write some lines and bam you have a decorator with a custom lifecycle for example a before function execution and after function execution or payload editing or something else. In java you have write tons of stuff just to get something that can do a fraction of this.
decorators have been a great boon to my discord bot where I use them to check user and client permissions in various commands that require administrative privileges. Previously I had a repeating bit of code of 3-5 lines in each such file which is now reduced to the single decorator line. They're really amazingly useful!
After 5 years I went looking if decorators have fallen from grace since I only see them now in Angular or NestJS, and then found this explanation, and is very clean, it should replace the original documentation.
For a prop decorator, a good use case for me is to convert a boolean to 1 or 0 because jquery ajax sends it as a string of true or false and that causes some headaches. it's great that I can apply a decorator to a property rather than change lots of code
I don't usually comment on any video I watch but yours are great! You explain somewhat complex topics with practical examples and make it look easy, love it. Keep the hard work you are killing it!
I honestly don't get it. In both the "Emoji" and "Confirmable" decorators you write functions that return a function THAT EXPECTS ARGUMENTS. When/where are those arguments passed to the functions? I understand that there is a 'message' argument passed to the main confirmable function, but what about it's inner function. When/where are those arguments passed? Please help! Much appreciated. Your videos are awesome
Great question. You don't pass them directly, TS interprets them depending on what you're decorating. For example a property decorator will always have (target, key) arguments in that order.
I cannot stress enough how much I love your videos. Sometimes I end up on your videos purely through a google search. I see Fireship and I instantly click. You explain concepts in a concise yet understandable manner.
Hey, thanks for the video. Though in the beginning you mentioned that you will go over parameter's decorators (method arguments?) but never touched this point. I am looking for any information on how does this type of decorator work but can't find any.
I've watched multiple videos on youtube explaining decorators and I am convinced nobody has any clue what they're talking about. Most creators dive in to code examples stating decorators are 'really cool' and 'really useful' without even explaining why they are necessary or what efficiencies they add to the development process. Most don't even attempt to justify the supposed benefits against the loss of readability away from conventional Javascript. Why on earth has this syntax been adopted by Typescript when it is so far removed from normal convention?
The title of this video 'Magic of TypeScript Decorators' is actually a great choice. Typescript Decorators are indeed magic, they do not follow normal rules which is surely what you want with a programming language.
Great tutorial overall but your misunderstanding about the property decorator caused me a lot of confusion. The "target" argument does not refer to the class but the prototype of the class (constructor function). And you didn't need to assign target[key] to the val variable as target[key] is undefined. You didn't need to assign any value at all to val as only the get and set functions refer to it using closures and the initial value is insignificant since you are assigning a value to it in the class itself. And it's important to note that, when you do this, the property no longer stays a property of the actual instance object but rather becomes part of the prototype. To confirm, console.log(new IceCreamComponent().__proto__) and console.log(new IceCreamComponent()). You will notice that only the __proto__ object contains the flavor property but not the instance itself. And MORE IMPORTANTLY, different instances of the class will have access to the same flavor property. For example: const Ice1 = new IceCreamComponent(); const ice2 = new IceCreamComponent(); ice1.flavor = 'chocolate'; console.log(ice1.flavor, ice2.flavor); // BOTH WILL RETURN CHOCOLATE FLAVOR! I hope this helps everyone else who stumbles upon this and ends up as confused as me. :)
Very useful video. Just one request though to make it bit slower.. everything seems to be running very fast. Not able to get complete hold of what's going on.
@@weltmeister In general, you are using any typescript based framework, one should have thorough knowledge of decorators otherwise life is going to be tough. I am feeling it really tough.
I didn't quite understand how 'Object.freeze(SuperClass.constructor)' prevented the class from being extended? Inheritance would internally use 'SubClass.prototype = Object.create(SuperClass.prototype)'. Object.create would internally do 'return new SuperClass.prototype'.
Ok, cool and dandy. But what has made ngrx go from Effect decorator to createEffect factory? Was it type safety or was it that decorators are still experimental? For some reason they did so. Not a good recommendation then for using decorators.
I'm studying decorators in typescript and I came across a question related to javascript prototyping. First, I read in articles that the decorator in Property Decorator has the target which is the prototype of the class. Testing things out (in example 1) I came across that the line of code >> console.log("In get: this === target", this === target); make a comeback >> "In get: this === target ==> false" This made me strange because this would actually refer to the target object itself, however the comparison this === target brings a boolean value false. However, it is seen that in example 2 the opposite (which in my head what was expected), we have that the line of code >> console.log("this === person ==>", this === person); make a comeback >> this === person ==> true I'm lost on this, could someone explain to me, thanks in advance. Code: /* Example 1 */ console.log("****Example 1****"); function logProperty(target: any, key: string) { console.log("target === Task.prototype ==> ", target === Task.prototype); const newKey = `_${key}`; Object.defineProperty(target, key, { get() { console.log(`Get: ${key} ==> ${this[newKey]}`); console.log("In get: this === target ==> ", this === target); return this[newKey]; }, set(newVal) { console.log("In set: this === target ==> ", this === target); console.log(`Set: ${key} => ${newVal}`); this[newKey] = newVal; }, enumerable: true, configurable: true, }); } class Task { @logProperty public id: number; // @logProperty public title: string; constructor(id: number, title: string) { this.id = id; this.title = title; } greet() { return "Hello"; } } const task = new Task(1, "Write more articles"); console.log(task.id, task.title); console.log("task ==>", task); console.log("Task.prototype ==>", Task.prototype); /* Example 2 */ console.log(" ****Example 2****"); const person = { name: "age", }; Object.defineProperty(person, "getName", { get: function () { console.log("this === person ==>", this === person); return this.name; }, set: function (value) { //... }, }); console.log((person as any).getName);
This is just the basics. Most of the decorators only add metadata and the class decorator will do the actual work while reading the metadata stored in the descriptors.
Hey great video. I was wondering if you faced something I faced while using decorators; is it possible to inject Angular dependencies in decorators? I haven't found any clean solution to this! In any case, thanks!
Great question. There is not a clean way afaik, but it is possible if you create an injector somewhere and import it. I should put a snippet up ok fireship.io
So if you don't do class-based ts/js, or almost not at all, you can use decorators where? Or actually, would there be a point at all to do this as opposed to composing functions functional style?
Is there a way how to unpack the syntactic sugar of decorator? In particular, I wonder how to re-write this: ``` @Emoji() flavor = 'vanilla'; ``` I would like to see how does the inner annonymous function inside `Emoji` acquires the `target` object.
Very useful video ... thanks for posting! I have one question if you ever have time: When you talk about hooks, I didn't understand the signature on when you used the @UseState hook - You call @UseState(0) count; setCount; ... Do count and setCount just become properties on the class? Seemed like odd syntax if that is the case. Thanks for any guidance ... again, thanks for the video!
What about JavaScript Decorators ? learned from an online book (sort of) and now can' t even find a single video or resource related to it. WTH typeScript and python decorators videos are everywhere
I like your news videos, but not your code tutorials, since the copy paste is unnatural, feels less human. It has the same effect in me than a vertical video.
Everything is very nice but the decorators seems more verbose implementation of a "pipe" function and, more general, function composition. Very useful in OOP but seems like wanting to use a more "functional" paradigm, so why don't use it directly? I guess it could be easier and less verbose.
Hey great vid, at 4:11 (ua-cam.com/video/O6A-u_FoEX8/v-deo.html) How is the setter function getting the argument (next), is it by default passed whenever we set the value of the property. If that is the case you passed 'Vanilla', where did icecream came from? Thank you.
I literally have no closest idea what exactly is happening here... this video is for advanced folks only. I still think you need to change the way you explain with that monotonous tone.
This like anti ASMR with headphones, please consider using a noise gate. I can hear your lips smacking and swallowing the whole time. Its like nails on a chalkboard.
I have not even the closest idea what's happening. I definitely need to strengthen my typescript skill first.
You're not alone 🤣
Agreed. He's talking in a speed as if you've mastered it and just need a quick code example of how it works haha!
@@BrandenLaCour if you didn’t know if you click the 3 dots on UA-cam while watching the video (iOS app) you can slow the speed he talks
@@BrandenLaCour that's his target audience actually
Yes. I think it's cool to make a video with more advanced content. I will study de subject end return to see the video again.
Decorators is something I have really struggled to learn in TypeScript, but this video really clear up everything. Great as always!
That's was my goal, they docs are not very approachable.
@@Fireship Yeah best instruction I've found so far.
Agreed but if you ever tried Java Annotations you know what really is hell. Typescript Decorators are so much simpler and also in most cases powerful!
@@rc3043 I've used Java spring boot in few projects and Java Annotations looked good enough.
what's the problem there? can you tell me, so my future self can be saved from troubles?
@@monarch0243 Just getting a simple Annotation to work is a pain in the butt. Where ein ts and c# you just write some lines and bam you have a decorator with a custom lifecycle for example a before function execution and after function execution or payload editing or something else. In java you have write tons of stuff just to get something that can do a fraction of this.
decorators have been a great boon to my discord bot where I use them to check user and client permissions in various commands that require administrative privileges. Previously I had a repeating bit of code of 3-5 lines in each such file which is now reduced to the single decorator line. They're really amazingly useful!
Good for you
That was the cleanest Typescript decorator explanation I've ever stumbled across. Keep up the good work!
WOW. Please do a series on rendering of Angular.
As python developer it makes sense so smooth. Thank you for great video!!!
After 5 years I went looking if decorators have fallen from grace since I only see them now in Angular or NestJS, and then found this explanation, and is very clean, it should replace the original documentation.
Would love to see a bit more explanation on what and how decorators actually work instead of only code
Yep, I agree. It helps understand how decorators actually work under the hood.
Don't confuse, speed is set to Normal. Change the playback speed to 0.75. Thanks, Sir for this to the point explanation.
At 4:37 his voice turns to Thanos'
LOL, activate morning voice
my voice changes too when i open chrome devtools
@@setterbs haha
@@setterbs 😂
For a prop decorator, a good use case for me is to convert a boolean to 1 or 0 because jquery ajax sends it as a string of true or false and that causes some headaches. it's great that I can apply a decorator to a property rather than change lots of code
That does sound like a good use case 👍
Excellent explanation!! I enjoy the fact that you present topics that are poorly described on the internet in such a detailed manner.
I don't usually comment on any video I watch but yours are great! You explain somewhat complex topics with practical examples and make it look easy, love it. Keep the hard work you are killing it!
Thank you, really appreciate that :) It's a lot harder than it looks behind the scenes.
I honestly don't get it. In both the "Emoji" and "Confirmable" decorators you write functions that return a function THAT EXPECTS ARGUMENTS. When/where are those arguments passed to the functions? I understand that there is a 'message' argument passed to the main confirmable function, but what about it's inner function. When/where are those arguments passed?
Please help! Much appreciated. Your videos are awesome
Great question. You don't pass them directly, TS interprets them depending on what you're decorating. For example a property decorator will always have (target, key) arguments in that order.
@@Fireship I see! Thank you very much for your reply! Appreciate your work so much!
Gold nuggets of information
Thanks, your explanation is far better than ts official doc :D
thanks one of the best decorators explanation
Awesome explanations. Really love it. Thanks!
Woah! Definitely going to use those confirmable decorators, and experiment creating other useful stuff! Thanks again for the video.
I cannot stress enough how much I love your videos. Sometimes I end up on your videos purely through a google search. I see Fireship and I instantly click.
You explain concepts in a concise yet understandable manner.
Hey, thanks for the video. Though in the beginning you mentioned that you will go over parameter's decorators (method arguments?) but never touched this point. I am looking for any information on how does this type of decorator work but can't find any.
I've watched multiple videos on youtube explaining decorators and I am convinced nobody has any clue what they're talking about. Most creators dive in to code examples stating decorators are 'really cool' and 'really useful' without even explaining why they are necessary or what efficiencies they add to the development process. Most don't even attempt to justify the supposed benefits against the loss of readability away from conventional Javascript.
Why on earth has this syntax been adopted by Typescript when it is so far removed from normal convention?
The title of this video 'Magic of TypeScript Decorators' is actually a great choice. Typescript Decorators are indeed magic, they do not follow normal rules which is surely what you want with a programming language.
One of the best..❤️
Absolute gold!!! thank you!!
Great tutorial overall but your misunderstanding about the property decorator caused me a lot of confusion. The "target" argument does not refer to the class but the prototype of the class (constructor function). And you didn't need to assign target[key] to the val variable as target[key] is undefined. You didn't need to assign any value at all to val as only the get and set functions refer to it using closures and the initial value is insignificant since you are assigning a value to it in the class itself.
And it's important to note that, when you do this, the property no longer stays a property of the actual instance object but rather becomes part of the prototype. To confirm, console.log(new IceCreamComponent().__proto__) and console.log(new IceCreamComponent()). You will notice that only the __proto__ object contains the flavor property but not the instance itself. And MORE IMPORTANTLY, different instances of the class will have access to the same flavor property. For example:
const Ice1 = new IceCreamComponent();
const ice2 = new IceCreamComponent();
ice1.flavor = 'chocolate';
console.log(ice1.flavor, ice2.flavor); // BOTH WILL RETURN CHOCOLATE FLAVOR!
I hope this helps everyone else who stumbles upon this and ends up as confused as me. :)
Very useful video. Just one request though to make it bit slower.. everything seems to be running very fast. Not able to get complete hold of what's going on.
u r too advanced
This video is a bit more advanced, but it's not essential knowledge for most developers.
@@Fireship if you're using loopback 4 then it is essential
@@weltmeister In general, you are using any typescript based framework, one should have thorough knowledge of decorators otherwise life is going to be tough. I am feeling it really tough.
In spring decorators are life
Awesome video!
Thank you for efforts, really easy to understand :)
I didn't quite understand how 'Object.freeze(SuperClass.constructor)' prevented the class from being extended? Inheritance would internally use 'SubClass.prototype = Object.create(SuperClass.prototype)'. Object.create would internally do 'return new SuperClass.prototype'.
It prevents the call of super() (frozen constructor) in the class that extends the frozen class. It going to be a run time error tho.
Nice. Thank you master
Simple and to the point!
Well i'm struggling a lot to understand this, is it worth the pain?
If your project uses OO design, it's definitely worth it
Waiting for Lombok to create a typescript version of their library now.
Decorators remind me of RxJS's pipes. I didn't look at their code, but perhaps they use decorators to pull it off.
Ok, cool and dandy. But what has made ngrx go from Effect decorator to createEffect factory? Was it type safety or was it that decorators are still experimental? For some reason they did so. Not a good recommendation then for using decorators.
I'm studying decorators in typescript and I came across a question related to javascript prototyping.
First, I read in articles that the decorator in Property Decorator has the target which is the prototype of the class.
Testing things out (in example 1) I came across that the line of code
>> console.log("In get: this === target", this === target);
make a comeback
>> "In get: this === target ==> false"
This made me strange because this would actually refer to the target object itself, however the comparison this === target brings a boolean value false.
However, it is seen that in example 2 the opposite (which in my head what was expected), we have that the line of code
>> console.log("this === person ==>", this === person);
make a comeback
>> this === person ==> true
I'm lost on this, could someone explain to me, thanks in advance.
Code:
/* Example 1 */
console.log("****Example 1****");
function logProperty(target: any, key: string) {
console.log("target === Task.prototype ==> ", target === Task.prototype);
const newKey = `_${key}`;
Object.defineProperty(target, key, {
get() {
console.log(`Get: ${key} ==> ${this[newKey]}`);
console.log("In get: this === target ==> ", this === target);
return this[newKey];
},
set(newVal) {
console.log("In set: this === target ==> ", this === target);
console.log(`Set: ${key} => ${newVal}`);
this[newKey] = newVal;
},
enumerable: true,
configurable: true,
});
}
class Task {
@logProperty
public id: number;
// @logProperty
public title: string;
constructor(id: number, title: string) {
this.id = id;
this.title = title;
}
greet() {
return "Hello";
}
}
const task = new Task(1, "Write more articles");
console.log(task.id, task.title);
console.log("task ==>", task);
console.log("Task.prototype ==>", Task.prototype);
/* Example 2 */
console.log("
****Example 2****");
const person = {
name: "age",
};
Object.defineProperty(person, "getName", {
get: function () {
console.log("this === person ==>", this === person);
return this.name;
},
set: function (value) {
//...
},
});
console.log((person as any).getName);
Great example! Thanks
Java / Spring developers know these Decorators as Interceptors and Property Editors
This is just the basics.
Most of the decorators only add metadata and the class decorator will do the actual work while reading the metadata stored in the descriptors.
So easy, thanks!
GREAT VIDEO, keep it up, love it
Hi Fireship. This content is great! btw, How long have you been coding if i may respectfully ask.
Always here to say hi :D
Howdy 🤠
Hey great video. I was wondering if you faced something I faced while using decorators; is it possible to inject Angular dependencies in decorators? I haven't found any clean solution to this! In any case, thanks!
Great question. There is not a clean way afaik, but it is possible if you create an injector somewhere and import it. I should put a snippet up ok fireship.io
Great video
I like to think I'm pretty competent with typescript but this was way over my head. Possibly because I've never touched angular
So if you don't do class-based ts/js, or almost not at all, you can use decorators where? Or actually, would there be a point at all to do this as opposed to composing functions functional style?
Is there a way how to unpack the syntactic sugar of decorator?
In particular, I wonder how to re-write this:
```
@Emoji()
flavor = 'vanilla';
```
I would like to see how does the inner annonymous function inside `Emoji` acquires the `target` object.
Can you please tell the font and theme you are using
So they're like Java annotations but with less limitations?
Can we see how you trigger change detection from a method decorator? curious on how to be able to call that change detector ref.
Wow didn’t know Angular left JS to turn into Spring 😂.
Very useful video ... thanks for posting! I have one question if you ever have time: When you talk about hooks, I didn't understand the signature on when you used the @UseState hook - You call @UseState(0) count; setCount; ... Do count and setCount just become properties on the class? Seemed like odd syntax if that is the case. Thanks for any guidance ... again, thanks for the video!
how do you edit your video? how are you able to paste so much stuff without moving the cursor?
I don't understand. Angular JS requires Typescript. Google has the V8 engine. Why isn't Typescript natively supported yet?!
You have a great content at your channel, but you are very fast it is too difficult to follow. If you write the code slowly it will be easier
Slow down the playback speed
hi bro
what app are you using to record videos ?
I just use a linux app called "simple screen recorder", then adobe premier for editing.
are you sure that decorators are composable from top to bottom, pretty sure it's bottom to top
The order of evaluation is from top to bottom and the execution is from bottom to top.
@@teebu Hi, what's the difference between evaluation and execution?
Whats the key difference between Decorators and JavaScripts proxys then?
this one is way too cool
What about JavaScript Decorators ? learned from an online book (sort of) and now can' t even find a single video or resource related to it. WTH typeScript and python decorators videos are everywhere
I like your news videos, but not your code tutorials, since the copy paste is unnatural, feels less human. It has the same effect in me than a vertical video.
You lost me somewhere in the middle 😅. But seems to be something i should use
This dude walks cheerfully in the valley of death (inner js shit) 😵
How are TS decorators different from JS decorators?
great video.
3:21 Wait, isn't that counterbalanced with memo? The case when something inefficiently re-renders on canvas.
what font are you using in vsc?
Everything is very nice but the decorators seems more verbose implementation of a "pipe" function and, more general, function composition.
Very useful in OOP but seems like wanting to use a more "functional" paradigm, so why don't use it directly? I guess it could be easier and less verbose.
From c#, this is attributes.
Top to bottom? Isn't it the other way around
what the song is playing?
Did you changed your voice since 4:37?
Dope !!!
Is it just me or did his voice chance mid-way through the video?
correct me if i am wrong but at 10:05 you dont need to pass name as args,
you can simply use it directly at line no102 isn't ?
why did his voice change midvideo
Are you explaining or talking to yourself
I can’t catch this speed
Hurry Hurry !!
Not the best way to explain Decorators... But nice try
Hey great vid, at 4:11 (ua-cam.com/video/O6A-u_FoEX8/v-deo.html)
How is the setter function getting the argument (next), is it by default passed whenever we set the value of the property.
If that is the case you passed 'Vanilla', where did icecream came from?
Thank you.
To me decorators just lead to a lot of over-abstracted magical wishy-washy code that results in a bunch of arbitrary side effects.
I literally have no closest idea what exactly is happening here... this video is for advanced folks only. I still think you need to change the way you explain with that monotonous tone.
lol could hav been started with simpler example...(for non angular people like me)
started making sense at 6:30 lol
yeah... i don't understand
Confusing
Man, you seem to be explaining things for people who already know those things.
Way too fast, way too compressed.
disagree
This like anti ASMR with headphones, please consider using a noise gate. I can hear your lips smacking and swallowing the whole time. Its like nails on a chalkboard.
@SetTimeout()
If javascript wouldn’t already be a mess, let’s sprinkle more on top
I really appreciate the effort for trying to help people with your videos. But honestly you guys move to fast, and its annoying. its not even helpful.
first :P
Another 🥇 - Hey, would you you be interested in a Flutter GeoLocation collaboration?
@@Fireship Yes yes yes! :D
@@darshangowda309 Let's chat in slack, send me a dm there goo.gl/8BKA1e
If you'll promote jQuery, this will be back no.1 :))
First: Nothing works as shown
Second: Voice is super annoying
DISLIKED!!!!
This is way too fast and hardly understandable
the cgi is shit...I can tell you that much
You lost me