The Magic of TypeScript Decorators

[@bronzekoala9141]

I have not even the closest idea what's happening. I definitely need to strengthen my typescript skill first.

[@dennisdecoene]

You're not alone 🤣

[@BrandenLaCour]

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!

[@grimmyst5323]

@@BrandenLaCour if you didn’t know if you click the 3 dots on KZbin while watching the video (iOS app) you can slow the speed he talks

[@artisanchuchu]

@@BrandenLaCour that's his target audience actually

[@filipelins7832]

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.

[@kazpeh]

Decorators is something I have really struggled to learn in TypeScript, but this video really clear up everything. Great as always!

[@Fireship]

That's was my goal, they docs are not very approachable.

[@RoyRope]

@@Fireship Yeah best instruction I've found so far.

[@rc3043]

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!

[@monarch0243]

@@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?

[@rc3043]

@@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.

[@rolandsfridemanis2844]

That was the cleanest Typescript decorator explanation I've ever stumbled across. Keep up the good work!

[@favna]

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!

[@sandeepr7141]

Good for you

[@ammadkhalid1857]

As python developer it makes sense so smooth. Thank you for great video!!!

[@CarlosEstebanLopezJaramillo]

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.

[@sourishdutta9600]

WOW. Please do a series on rendering of Angular.

[@eliancordoba1199]

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!

[@Fireship]

Thank you, really appreciate that :) It's a lot harder than it looks behind the scenes.

[@0x6e95]

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.

[@LikeAndFavBF3]

Excellent explanation!! I enjoy the fact that you present topics that are poorly described on the internet in such a detailed manner.

[@KristofferLie]

Would love to see a bit more explanation on what and how decorators actually work instead of only code

[@samandarboymurodov8941]

Yep, I agree. It helps understand how decorators actually work under the hood.

[@himanshushekhar26]

Don't confuse, speed is set to Normal. Change the playback speed to 0.75. Thanks, Sir for this to the point explanation.

[@PhuNguyen-bi7pi]

Thanks, your explanation is far better than ts official doc :D

[@peternjenga5045]

At 4:37 his voice turns to Thanos'

[@Fireship]

LOL, activate morning voice

[@setterbs]

my voice changes too when i open chrome devtools

[@prerakhere]

@@setterbs haha

[@will_abule]

@@setterbs 😂

[@andriesvanwyk3226]

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

[@Fireship]

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.

[@andriesvanwyk3226]

@@Fireship I see! Thank you very much for your reply! Appreciate your work so much!

[@AmxCsifier]

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

[@Fireship]

That does sound like a good use case 👍

[@EddyMunoz]

Gold nuggets of information

[@SprHero]

Woah! Definitely going to use those confirmable decorators, and experiment creating other useful stuff! Thanks again for the video.

[@lexcaraig]

Awesome explanations. Really love it. Thanks!

[@doop1953]

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?

[@doop1953]

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.

[@sevdamurat4455]

thanks one of the best decorators explanation

[@webzen92]

Awesome video! Thank you for efforts, really easy to understand :)

[@kurtestacion6113]

Hi Fireship. This content is great! btw, How long have you been coding if i may respectfully ask.

[@thalyssonleite1479]

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.

[@PaulPushkarov]

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.

[@TheMagnetShow]

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. :)

[@mohammadzahid4390]

One of the best..❤️

[@rahultiwari3040]

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.

[@aram5642]

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.

[@ayushman_sr]

u r too advanced

[@Fireship]

This video is a bit more advanced, but it's not essential knowledge for most developers.

[@weltmeister]

@@Fireship if you're using loopback 4 then it is essential

[@anonymoususer5402]

@@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.

[@dylanedwards8010]

In spring decorators are life

[@d4lep0ro]

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!

[@Fireship]

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

[@bronxandbrenx]

Nice. Thank you master

[@lautarogarcia8038]

Well i'm struggling a lot to understand this, is it worth the pain?

[@DEVDerr]

If your project uses OO design, it's definitely worth it

[@theyreMineralsMarie]

Waiting for Lombok to create a typescript version of their library now.

[@mangmaytinh08]

GREAT VIDEO, keep it up, love it

[@feelingeverfine]

Great example! Thanks

[@tahasoft1]

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

[@Nexus-rt1bm]

Slow down the playback speed

[@thejavascriptshow3754]

Always here to say hi :D

[@Fireship]

Howdy 🤠

[@ruggedrick]

Decorators remind me of RxJS's pipes. I didn't look at their code, but perhaps they use decorators to pull it off.

[@DK-ox7ze]

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'.

[@arturassotnicenko7859]

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.

[@adicide9070]

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?

[@LuizOliveira-oy1hc]

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);

[@UgrevsBoots]

Absolute gold!!! thank you!!

[@mdtamjeed]

Java / Spring developers know these Decorators as Interceptors and Property Editors

[@ikgeek]

Simple and to the point!

[@stevenaschoff]

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!

[@ravel1]

Great video

[@user-vg7zv5us5r]

3:21 Wait, isn't that counterbalanced with memo? The case when something inefficiently re-renders on canvas.

[@artit91]

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.

[@imvasia13]

So easy, thanks!

[@ameerattaa2250]

hi bro what app are you using to record videos ?

[@Fireship]

I just use a linux app called "simple screen recorder", then adobe premier for editing.

[@pilgrim2510]

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.

[@bobDotJS]

I like to think I'm pretty competent with typescript but this was way over my head. Possibly because I've never touched angular

[@comod]

You lost me somewhere in the middle 😅. But seems to be something i should use

[@lucas.n]

how do you edit your video? how are you able to paste so much stuff without moving the cursor?

[@wheytomuchforher]

are you sure that decorators are composable from top to bottom, pretty sure it's bottom to top

[@teebu]

The order of evaluation is from top to bottom and the execution is from bottom to top.

[@yinkaadedire5827]

@@teebu Hi, what's the difference between evaluation and execution?

[@jackkirby5287]

So they're like Java annotations but with less limitations?

[@shashikumar-ut6uu]

Can you please tell the font and theme you are using

[@sebastiangug8284]

Can we see how you trigger change detection from a method decorator? curious on how to be able to call that change detector ref.

[@marcianoacuerda]

Wow didn’t know Angular left JS to turn into Spring 😂.

[@kaibe5241]

I don't understand. Angular JS requires Typescript. Google has the V8 engine. Why isn't Typescript natively supported yet?!

[@hualiang2182]

Did you changed your voice since 4:37?

[@kenzo1387]

what font are you using in vsc?

[@davidbeckers6460]

Whats the key difference between Decorators and JavaScripts proxys then?

[@uzair004]

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

[@rose123998]

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 ?

[@xpkareem]

How are TS decorators different from JS decorators?

[@lexiaontube]

This dude walks cheerfully in the valley of death (inner js shit) 😵

[@RageBasterd]

great video.

[@muhammadtajwer2530]

Are you explaining or talking to yourself

[@andreadellamaggiora898]

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.

[@evige_ensom]

what the song is playing?

[@morpheus7422]

From c#, this is attributes.

[@reddyashok9]

this one is way too cool

[@kalahari8295]

Top to bottom? Isn't it the other way around

[@saeeduchiha5537]

Not the best way to explain Decorators... But nice try

[@ajeetworking]

Hey great vid, at 4:11 (kzbin.info/www/bejne/hWekXqiVe9R4jpo) 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.

[@QuentinMayo]

Is it just me or did his voice chance mid-way through the video?

[@1gobjroot525]

why did his voice change midvideo

[@yugandhar2007]

I can’t catch this speed

[@HelpUsBelieve]

Dope !!!

[@nsa3679]

yeah... i don't understand

[@arcan762]

To me decorators just lead to a lot of over-abstracted magical wishy-washy code that results in a bunch of arbitrary side effects.

[@minigeek]

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.

[@christianheisch8472]

Man, you seem to be explaining things for people who already know those things. Way too fast, way too compressed.

[@jonasgrnbek7113]

disagree

[@IagoCCampos]

Confusing

[@UODZU-P]

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.

[@alxx736]

Hurry Hurry !!

[@pradeep422]

lol could hav been started with simpler example...(for non angular people like me)

[@pradeep422]

started making sense at 6:30 lol

[@alqanasal7r]

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.

[@oktavic777]

@SetTimeout()

[@javi___]

If javascript wouldn’t already be a mess, let’s sprinkle more on top

[@darshangowda309]

first :P

[@Fireship]

Another 🥇 - Hey, would you you be interested in a Flutter GeoLocation collaboration?

[@darshangowda309]

@@Fireship Yes yes yes! :D

[@Fireship]

@@darshangowda309 Let's chat in slack, send me a dm there goo.gl/8BKA1e

[@dreamyrhodes]

This is way too fast and hardly understandable

[@valikonen]

If you'll promote jQuery, this will be back no.1 :))

[@vishaldaga3009]

First: Nothing works as shown Second: Voice is super annoying DISLIKED!!!!

[@alubhau]

the cgi is shit...I can tell you that much

[@100kjpeg7]

You lost me