Decorator Pattern (TypeScript Design Patterns)

hi everyone my name is Xavier and in this video we'll be taking a look at how you can use the decorator pattern in typescript just one remark before we start the decorator pattern has nothing to do with the decorators feature in typescript it's a bit confusing but decorators and typescript are basically like annotations in Java in this video we will discuss the pattern and not the feature a decorator pattern is useful for when you want to allow objects to have different options I'll explain them in an example let's assume that you're in charge of writing the ordering software for Tesla cars a customer has to choose between either the Model S or the Model X nothing too fancy but these cars have many different options that you can choose a customer might pick the improved autopilot or the smart air suspension or maybe both every option has a different effect on the price in this example the options that does not give you decorate your car hence the name decorator pattern you basically take a base class say the Model S instantiate it and then wrap many options around it this is much better than giving your Model S class a list of properties like it has smart air suspension and then calculating the total price by checking if these properties are set to true so let's dive into the code and take a look at how you can develop such a system with the decorator pattern ok so here I am in Visual Studio code ready to show you how the decorator pattern actually works so I've created two classes the Model S and the Model X class and both of these have a description and they have a method cost which returns the base cost of this carb so the model as cost 73 thousand dollars while the Model X cost seventy seven thousand dollars so the first thing that I'm going to do is I'm going to create an abstract class car that both of these classes will extend so let's start by creating an abstract class car so we're creating an abstract class here because there should be no instance car there should only be an instance of the Model S or the Model X never just a generic car now this class will have a description as both of these cars already have which is of type string it should also have a method get' description which should return a string and the method will look like this return this da description pretty simple and we will also create an abstract an abstract method cost that will return a number so now I'm gonna go to the Model S and say that this extends the car class and I'm gonna do the same for the Model X and say that it also extends the car class okay so next up we will define a class for all of our options that we can choose for our Model S and our model acts for example we might choose the enhanced autopilot so for this I'm going to create a new abstract class and I'm going to call this class car options and I'm going to say that this extends car this will be very important later on so a car option will decorate a car so we're gonna keep a reference to the card that we decorate I'm gonna call that decorated car and I'm also gonna say that this should override the get description method which returns the string and it should override the cost method which should return a number okay so that's our class for car options now let's create an actual car option so let's create a class let's say enhance the autopilot that's one of the options that you want to offer on our Tesla's and we're gonna say that this extends car options and visuals to your code will complain now it will say that I need to implement some elements of car options here so I'm gonna click on that and it will generate the methods that I need to override so the first one that I have to override is get description so I'm going to do that right here I'm gonna say well we're gonna return the description of the car that we deck and then we're gonna append the name of our options so we're gonna say enhanced autopilot okay now we're gonna do the same for the cost here we're gonna say that the cost of this option equals the cost of the decorated car plus the cost of this option so for example we're going to charge $5,000 for the enhanced autopilot now there's one more thing missing we need to fill in this decorated car property so I'm gonna make a constructor and this constructor will receive a car which will be of type car and we're just gonna say this dot decorated car equals car and of course we also have to call super okay so that's it when we create a new enhanced autopilot option we're going to give it an instance of car which could be a Model S or a Model X and then when we ask the cost of this option we're just going to take the Model S or the Model X that were decorating we're gonna take that cost and add $5,000 to it so let's make another one I'm gonna copy and paste this class here and let's say we also want to offer people rear-facing seats so I'm going to add rear-facing seats here we're gonna keep the decorated car we're gonna keep the constructor we're gonna keep the description but now we're gonna change it we're gonna say rear-facing seats because that's what this option is all about and we're gonna charge $4,000 for the rear-facing seats so how do you now use this decorator pattern well we're going to start by creating an instance of a Tesla so I'm going to say my Tesla equals a new Model S and now I'm going to say my Tesla equals a option for example new say I want the rear-facing seats rear facing seats and I'm going to pass along my Tesla so that it can decorate my car so let's now take a look at what it looks like if we run this we're gonna say console.log my Tesla and we're gonna log the description of my Tesla get description so let's open up the terminal now whoops and let's run the compose the typescript compiler on this and let's also run it and note at the same time there we go alright so here we can see that my Tesla will cost seventy seven thousand dollars that will be the Model S with rear-facing seats so that seems about right our model asks costs seventy-three thousand dollars plus the four thousand dollars for the rear-facing seats gives us seventy seven thousand dollars now let's say the customer also wants another option let's say he wants the enhanced autopilot while all we have to do is say my Tesla equals new autopilot new enhanced autopilot Ansari and give it again my Tesla so we can wrap around that object and now if I run it again our price is bumped up to eighty two thousand and the description of our car is now Model S with rear-facing seats and enhanced autopilot so that's a simple example of how you can use the decorator pattern to decorate classes in typescript now I just want to end the video by showing you the UML diagram of the decorator pattern here we have four components we have two abstract classes the first abstract class is called component and it has an operation in my example this was the abstract car class with the operation cost we also have the abstract decorator class in my example this was the abstract class car options then we have concrete classes for both of these so in my example the concrete components were Model S and Model X and the concrete components for the decorator were the rear-facing seats and the enhanced autopilot as you can see in this diagram the decorator also keeps a reference to the component that is decorating and it also overrides the same operation so that was it for this video I hope you liked it and you did make sure to subscribe to this channel so you won't miss new videos and if you want to learn more about design patterns in typescript check out the rest of the videos in this series

Channel: Simply Explained

Views: 34,769

Rating: 4.8500671 out of 5

Keywords: dummies, beginner, OO, tutorial, introduction, free learning, object oriented, series, training, decorator, fundamentals, learn, explained, lesson, getting started, best practices, basic tutorial, typescript, course, patterns, howto, learning, in action, programming, basics, free, best practice

Id: WPOLDEk1LF0

Length: 9min 11sec (551 seconds)

Published: Thu Apr 06 2017