Decorator Pattern (TypeScript Design Patterns)

With the Decorator pattern you can add behaviour to classes dynamically.

In this example I'll show you how to program a system to sell Tesla cars with many options (such as Auto Pilot). Each option affects the price of the car differently and a customer can choose many options or none at all. This is exactly the kind of problem that you can solve efficiently with a Decorator pattern.

Interested? Continue watching this series and learn more design patterns:

Are you new to TypeScript? Check out my video series to get started with TypeScript:

The code used in this video is available on GitHub:

► About me
Follow me on Twitter:

Check out my blog:

Subscribe to newsletter:

Like my Facebook page:

[hryhoriitereshchenko]

Hey from 2021! Thank you so much. Even in 2021, this is the best example and explanation I could find. Great job.

[reachbharathan]

Awesome video,
Great Video and rigtly called as simply,
in the latest version of typescript, we also need to mention the
`abstract decoratedCar: Car` so this gets auto implemented when we extend the CarOptions

[swingtraitor]

Bravo, very nice work, easy to digest. In case anyone is wondering you can just do a quick stackblitz demo (typescript project) to get a quick console logger.

[Ijy]

Dude, your vídeos are amazing, keep posting it, great work 🤙🤙

[adrianwyss]

tbh i was indeed looking for the decorator feature. However, i watched your video anyhow. Great job! You should cover more of these typescript design patterns!

[bogomya]

Hi, Savjee. I disagree with your example.
Abstract class CarOption have nothing in common with abstract class Car. They both have description and price, but it doesn't matter here. You didn't have to mix them in single class hierarchy. Probably the good idea to create common interface "Valuable" with one single method cost and implement this method in Car and CarOption classes.

[mizech]

Excellent video. Greetings from Saarland.

[TheFlyguy]

I really enjoyed the tutorial. You make so much sense. Thank you

[robertomolinasilvera]

You can use a compose fn with the constructors to do it more elegant

[sajankumarvijayan]

Awesome explanation brother! I loved it.

[vinttue]

amazing video, simple and clear. Nice. We want more like this :)

[ayushpratap]

Please add more videos to this playlist!

[ayushpratap]

HI Savjee! Really liked all your design patterns videos for typescript! Would really appreciate if you will add more videos to the series! waiting for a very long time! Please make videos on GANG OF FOUR design Patterns in typescript!HI Savjee! Really liked all your design patterns videos for typescript! Would really appreciate if you will add more videos to the series! waiting for very long time ! Please make videos on GANG OF FOUR design Patterns in typescript!

[EricSabag]

Very well explained, thanks!
Learning that, I was wondering how would that work with functional programming and component functions that become more and more popular these days? Is that unrelevant or do use this design pattern with a different approach?

[NikitaMatsapura]

Thx for explanation. If you want both options?

[oleksandrluchytskyi]

Thank you. The question: How we can protecte to double decoration? Rear. AutoPilot. And do not allow Rear again.

[Producdevity]

Please consider bumping up the fontsize a bit for the mobile viewers :) highly appreciated!

[rafaelwendel]

I liked the ideia, but would really be interested in a more practical implementation. Would it be a violation of the pattern if the mother class could call a method that returns the instance of the caller to the extending function? That way one could make

myCar = new ModelS();
myCar =

appendResource would look something like:
appendResource = (ResourceDecorator) => {
return ResourceDecorator(this);
}

[yugandhar]

I would be very happy if you have demonstrated something similar to angular using @EnhancedAutoPilot, however thanks a lot

[shokhbozabdullayev]

Is this logo, staying on this channel, the Polymer.js logo? Yep, it is probably rotated, recoloured and used as a new logo. What do you think man? Yes, you, the person who is scrolling through the comments.