TypeScript Tutorial #12 - Classes

okay then gang so now i'd like to talk about classes in typescript now classes in typescript are very similar to classes in javascript so i'm not going to go from the very beginning and explain exactly what a class is and how it works i would expect you to already know the basics if you don't then i've got a whole series all about object oriented javascript on this very channel so i'll leave the link to that down below so anyway a class is basically a blueprint for an object right so if we wanted to create some kind of invoice object or several invoice objects for our app we could create a class called invoice to structure those objects so to do that we'd use the class keyword then give our class a name which i'm going to call invoice and then inside the class we could define the different properties that invoice objects would have so for example i might have a client property to say who the invoice is going to and i'd also define the type of this property so in my example that's going to be a string i'm also going to do a details property and that is going to be a string as well and then finally an amount property which will be a number okay now right now we have errors on each of these three things and that's because we're not initializing values for them so to initialize values for these we could either set them equal to something right here but i'm not going to do that because every invoice object would have maybe a different client value instead i'm going to initialize those values inside a constructor so that whenever we create a new invoice object we can pass in three different values for these three properties so let's do that i'm going to say constructor right here and inside we need to pass three values the first one c for clients and no other reason is going to be a string the second one d for details is also going to be a string and the third one a for amount is also is going to be a number okay so inside this constructor we can take these parameters that we take in c d and a and assign those values to these properties so let's say this to refer to the instance of the object that we're creating based on this class and then give it the client value of c that we take in then i'll say this dot details is equal to d and then finally i'll say this dot amount is equal to a so now whenever we create a new invoice object based on this class the constructor is going to run it's going to take in the three values we pass into it and it's going to assign those values to these three properties client details and amount now also i want to create a method on this class so i could do that by just saying the method name format for example and this format method is only going to return a string where we format these different details so i'm going to return a template string so backtick so i can dynamically output variables inside the string and i'll say dollar sign curly braces to output one of those variables and it's going to reference this dot client so whatever the value of clients is then i'll say ohs and then i'll do a pound sign because it's going to be in pounds then dollar and curly braces to output another variable and this is going to be the amount so i'll say this dot amount and then after that i'll say 4 and then dollar sign and then we'll output the details so we'll say this dot details okay so that's all that's doing it's just returning a simple string which is formatting these different properties in a string okay so now we have our class what if we want to instantiate that class and create an object based on it well all we do is say something like const in one stands for invoice one and set it equal to a new invoice much like we would in javascript so we need to pass in three arguments one for each of these c d and a so the first one is the client so i would pass in a string for that for example mario could be the client the second one is going to be the details so i'll say work on the mario website and the third one is going to be the amount in pounds so i'll say 250. okay so now we're creating a new instance of this invoice object based on this class and it's going to return that new object in in one so i'll do one more i'm going to just duplicate that and change this to inv 2 and i'm going to change mario to luigi and then i'll change mario to luigi over here as well and this time i'm gonna charge him 300 because i don't like him as much as mario okay so now we have these two invoices let me just log one of these to the console so i'm gonna say console.log in fact we'll log both of them in one and in two okay so save that and come over here and if i refresh it's not working and that's because i have not compiled this so let me open up my terminal and then i'm going to say tsc and hyphen watch and that's going to compile for me so now if i go over here we should see those in the console so there's the first invoice object and there is the second one okay now the cool thing about using these classes for objects is that if we wanted to in the future we could create maybe an array and only allow invoice objects in the array much like we did string arrays or boolean arrays where only that type is allowed in the array we can do that with classes or class objects as well so let me just get rid of this and say let invoices equal to an empty array now then i could give this a type couldn't have by saying something like string and then square brackets and now only strings would be allowed to be pushed or added to this array now what if i want to make it so that only invoices can be added to that array well i could remove string and change this to invoice now only objects that are created using this invoice class can be added to this array so if i tried to say for example invoices.push and then a string for example hello this is not going to be allowed we get an error if i try to add some kind of object with i don't know a name property for example then this is not going to be allowed because these are not invoices but i could add in one like so and i could also if i say invoices dot push and then add inf to as well that is allowed and i can just console.log the invoices so we can have a look at them in the console over here and we can see now we have an array with two invoice objects inside it pretty cool right so now we can kind of use our classes with arrays as well to limit what kind of objects can be added to arrays so in the future i could make a whole array of different invoices and i could be certain that all of the objects in that array are of invoice type when i'm cycling through them so i can maybe output them to the dom in the same way now by default when we create objects using this class all of the different properties right here are public on the class meaning that whenever we create a new instance of that class we can access all of the properties and we can change them as well so for example i could say in one dot client is now equal to yoshi and that would be absolutely fine i could also say inf 2 dot amount is now equal to 400. by the way i couldn't change the type of them i couldn't change this into a string because we've already said that amount must be a number so we can't change that but we can't access and change all of the different properties so now if i come down here and say console.log in one and in two we're going to see those different values inside those objects so if we take a look we now see 400 over here and we see yoshi over here now we don't always want that to happen we don't always want to allow ourselves or other developers to change these properties later on in the code so in typescript much like javascript we can use access modifiers to limit that and we're going to see those in the next video

Channel: Net Ninja

Views: 133,281

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: OsFwOzr3_sE

Length: 8min 46sec (526 seconds)

Published: Tue May 19 2020