TypeScript Core Concepts - Using classes in TypeScript

Key Takeaways

welcome back to the getting started with typescript series my name is dan wallin i'm a cloud developer advocate at microsoft and in this video we're going to focus on using classes in typescript now what i'm going to cover is what a class is how you could use it in some of the different class members specifically we'll focus on properties constructors and functions but as we do this i do want to mention up front that classes are a little bit subjective some people use them all the time some people don't like them at all and just prefer to use functions it really depends if you come from a net background or maybe java or something along those lines object oriented then classes are pretty comfortable to you if you come from more of a functional programming background then you may not like classes so my take on it is use the right tool for the right job if classes work for your scenario great go for it even if you don't use them right away knowing about what they offer is good and that's what we're going to cover here so let's jump on in so to create a class all we have to do is type the class keyword and then i'm going to create a class called customer and this is going to be a kind of base class foundation if you will that we can then build on top of if we want now classes can have members one of those members can be properties so for this one let's say that we have a first name a last name and maybe an age something like that and then classes can also have a way to initialize them and pass data in and that's called a constructor so we can type the word the literal world constructor like so and then we could just do this but it wouldn't buy us a lot this would be an empty constructor now down here we could say let customer equal new customer that would actually call into there but what if we want to pass the first name last name and age well we can put that in as parameters for the constructor so we could say fname is a string lname is a string and i'm just shortening these a little bit number and then we can map them up to our properties and the way we do that is this gets us to this instance of the class once it's running okay so this dot notice i can get to the members of the class so i can get to the age the first name and the last name so i'm going to quickly map these okay and we're done but there's an easier way to do this a much easier way if you ever want to pass in different members like this and just all you want to do is map them to existing properties then there's a little cheat you can do now i'm going to go ahead and leave this for now i'm going to copy and paste down so you can see the difference and let's call this re-factored customer or something like that now i'm going to actually delete the properties i'm going to delete all this and we're going to let typescript generate the properties for us so i'm going to say first name and last name first off but what i'm going to do is i need to decide are these public can anyone get to them that uses this class or are they private to the class only the class can get to them well these are probably public so we're going to put the public keyword on front of all three of these and now watch what happens here if i say let customer equals new refactored customer now notice i can pass in first name last name and h okay so we'll pass in john doe john is 45 we'll say and now if we did console.log customer.age and we run this we should see 45. so let's go ahead and run this we'll come and open this up and there we go we get 45. now what's unique about this is let's go to the javascript that's generated and you're going to notice that for the top class we only have the different members that you saw earlier okay we initialize them and then we map them so it's actually generating all that code now the refactored ones a little bit cleaner you'll notice we have the constructor first last and h but notice that it just directly maps to these different properties it actually generates the properties for us pretty cool actually now the reason that it's just outputting classes by the way is because we're targeting es2017 if i switch this to wayback days es5 it converts classes to functions but if you're targeting modern browsers you can usually go with es2017 or possibly higher okay so that's kind of the first thing so i'm going to go ahead and delete this let's rename this to customer and now we're kind of off and rolling here now you can have other things though and i'm going to go ahead and i usually do something like that you may want to wrap these a lot of people will do this just to make it a little bit easier to follow totally up to you the other thing we can have is functions so we can have properties and we can either physically define those ourselves or we can let typescript do it by putting public or private in front of the constructor parameter but let's say that we have a function let's just call it place order and it takes uh i don't know a product id something like that which is a number and in this case i'm just gonna log the product id to keep it quick and easy that's all you have to do now if you're new to this the important thing you do not put the function keyword when it's inside of a class and i should have mentioned at the beginning everything i'm doing here for the most part aside from the public and private this is all es2015 these features came out when kind of the most major version of the javascript language came out which was quite a while ago now but now we could go ahead and say customer.placeorder we need to pass in there's the guardrails coming up the order id or product id so we'll just make up one here and now we can run it and there we go there's the age that was written out right there and there's our place order and that's the main members you're gonna find in a class now the last thing i want to show you is you can leverage inheritance i mentioned at the beginning that customer could be a base class that we can build on top of so we could actually come in and make a class and let's just call it gold customer it's one of those customers that has a lot of you know frequent flyer miles type things but what i'm going to do is say extends customer now if i just do that alone we can now say gold customer is new gold customer and notice that i now need to pass in first name last name and age yet i never wrote the constructor here now i'm going to show you something you may have to do though if you do put a constructor but for now let's go ahead and leave this so we could just copy right here let's change this to jane doe jane is 38 let's say really matter and then we'll console.log um gold customer dot age and we will call gold customer dot place order all right and let's go ahead and run this now and there we go there's our 38 for age there's our five for the place order so notice we just inherited that functionality down now a little gotcha on this if i do put a constructor like this it's going to go red and the reason is if you put a constructor then it still needs to call this constructor in what would be called the base class customer in this case now normally what you'd probably do there is maybe you want to tweak things a little bit but you could just call super like this but notice when i mouse over super it expects three parameters so if i don't want them to pass in anything at all for gold customer i would have to default these maybe do something like that now notice this is red because now you don't pass anything and the way i would set the properties in this case would be gold customer dot and then i could say age equals 38 and i could do the same for first and last name now if we run it notice we still get the 38 here now i'm not saying you would want to do it this way but just know that if you ever extend a base class and if you put a constructor you have to call super super represents your base class and that is the constructor right there that's the supers constructor and that's actually what we're calling now there's a lot more we could go into but that's some of the fundamentals of getting started with classes in typescript and some of the tricks you can do such as adding public to have the auto-generated properties really nice feature i use all the time not appropriate for every situation of course use it wisely but there you go so please like and subscribe so you know about future videos in this series and we'll see you in the next video