The Magic of TypeScript Decorators

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.

what the song is playing?

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

Nice. Thank you master

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

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

what font are you using in vsc?

why did his voice change midvideo

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.

How are TS decorators different from JS decorators?

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

Great video

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

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

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

Confusing

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

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

From c#, this is attributes.

So easy, thanks!

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

As python developer it makes sense so smooth. Thank you for 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

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

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.

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

Absolute gold!!! thank you!!

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

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.

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?

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

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.

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

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

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

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

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.

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

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

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

Hurry Hurry !!

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.

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