Let's Learn Typescript | Work With Classes, Modules and Enums 03

have young guys all were doing welcome to the third tutorial on the series of learning types paired for JavaScript developers so we are the third one pretty much we've gone too far in this series after like covering the getting start and the saying I'm being white we are actually we are actually working on and we have like cover the interfaces and the typing system time cube actually our is based it on and all the different things now it's time to get deeper into typescript and learn more things that are gonna be suitable for you or for your development projects so I'm just gonna go ahead and learn the classes and enums and how to use classes with interfaces and all the different things about classes because classes are such a huge thing are something really really nice especially poor oriented object programming so if you're familiar with Java or C++ or Python or something like this I'm just gonna just grab all of the oriented or oo key word to the dynamic type in or to the JavaScript web or the web work so I'm just gonna go ahead and use it right in the box one quick now let's make sure to go ahead and watch both the toys if you haven't already so this like on my website up is calm the getting started the first one and the second one so make sure to go ahead and watch it before you can just go ahead and continue on the series and the documentation pretty much of the time script language or org the documentation in there is quite self-explanatory so the video tutorials only once like you know fit for you because there are a lot of things to cover there's a lot of things to learn more about typescript type scripts not only a thing or library it's a huge language so there's a plenty of plenty of things you can go ahead and learn so checking out the documentation is a really nice idea so make sure to go ahead and do that I'll be very very happy for you to hear that you have Jerry the documentation and you have like learned something beneficial from documentation so just go ahead into a project that we have set up in the last time and see we are having a clean file on you I'm just gonna go ahead and start working on this file pretty much right now so rustics first let's just go ahead and like it use interfaces with the classes so you can just go ahead and click or an interface and use that interface with with a class you aren't going to use so you can use it pretty much the same as using or in a normal variable so it would just like Strix your typing system I'll just go ahead and create an interface in every quickly them just go say interface and it just call it person an interface something like this and this interface is gonna have I can name which is a string you're gonna have like an age a string or an age is pretty much your number and pretty much a very simple thing I'm gonna have a method so say my name and this method is having no on humans pretty much and that you should already be familiar with methods this without covering the last one and returns of board which means to chose nothing so this is quite think quite basic interface in here now let us go ahead and deploy the class the color class quite basic pretty much the same as es6 classes and es5 so i just type in the keyword class and then you give the class a name let's say gonna be like a person since you have named our personal interface and actually to me or to link the class with the interface we need to implement the class with the interface so we're not gonna use the extends keyword or something like this we need to use the implements keyword the implement schema is pretty much means that we're gonna use this class with this interface or disconnect or this interface is gonna be responsible for the type in or the strict type in for this particular class so I'm just gonna say person interface and here we go so just come on quite doing this again I guess just gonna give us a very like a quick error so it tells us pretty much that the name and the age and the same name properties are not defined yet so just go ahead and do it just define them I quit plus possible so do the find something or define a property on the class you simply just go ahead and save the name of property a colon then the type of the property and here you got know how to define a pretty much a property on the class or you have defining an attribute other parts you can do that for the same all the things that just give it a different attribute and for the methods is quite simple the same thing but the methods so since it's quite simple to just go ahead and do it like this this is this is the generic way to define a method inside a class or just give it like method name make sure to see it's the same name in here and like parentheses declare normal function or normal method if you're familiar with then just like the curly braces to say where's the scope or to the club define the scope of this method square samples continue it's very basic pretty self-explanatory the attributes with the with the types and the same my name since we have already declared in here so we don't have to specify which returns void returns nothing since it's already being defined on us on the interface up there so as you can see this how linking and interface with the class words it's quite simple and quite basic so here's an interface is linked with the classes is always always better than not why you still can use a normal class for decor normal cost without declaring interfaces is quite you know it's gonna work for you with no problems so quite possible so with no problems actually about using interfaces way much better than this let's go ahead and create another file this is the object type script and it's gonna call this modular dogs tense for type scripts so for the shortcut so here's we're just gonna go ahead and declare a modular just gonna introduce you how modules pretty much work how to explore an important between several models so if you're familiar already with JavaScript important export is sexy keywords so this should be very very straightforward for you since quite simple and quite self-explanatory so for the module is that you go ahead and create a class in here let me just call this class like Grandparents class so yeah going pro in the clouds I'm just gonna call like this with no interfaces or something and this appearing class is gonna have a name which is gonna have a string and gonna have a constructor so Cruz Chuck's your way me and Boyd constructor because actually basically means this is the first method service can see constructor is basically a method so this is the first method is gonna be cold once we initiate or create an instance of this class so once we create messes of this class this is the first methods gonna be called automatically without your interference so you don't have to go ahead and biking into the instancing call the constructor or something like visit constructor is gonna automatically be cool so this first function or the first method I'm gonna be called whenever you create the instance of the class so it's basically means this by its name which means constructs in this class or construct the class let's go ahead and let's say this is gonna be the constructor I'm just gonna give it like a name and why don't we try to construct something I'm just gonna give it a name so the string and I'm gonna say this dot name equals name so as you can see quite simple if here just go ahead and try to remove this it's gonna just go ahead and give us an eric since the class has no attribute so properly name does not exist grandparent since we have to declare the attribute in order to be able to use it later on in the under methods around the class scope so this is the special thing about typescript if you're in the JavaScript right now you can just go ahead and save this dot name equals whatever thing whatever value I'm going to assign to this variable just gonna work for you pretty much fine without declaring or saying this about your variable in here or something like this but for touch codes this is the way worse you have to specify the type and you have to add the property to the class first in order to be able to use it later on on the class scope so this can see it's quite simple thing to go ahead and create an instance of the grid it's crazy it's this quite simple as well all you're gonna need to do let's say this is gonna be the component and it's gonna be like I don't know so let's say it's gonna be all dirt and equals new brand prints so some of you might ask why you haven't specified the type in here since I'm just like in an inline declaration of a line of volume assassination which means pretty simple you can just go ahead and do the grant program in here you can deploy the you can give it a type but it's not strictly you know you don't have to do this you shouldn't or you mustn't do this you can do it but it's not that big thing for like I recommend use if you not go do that because just gonna make it simple for you to read through that and as well as for all those developers or for your other teammates and stuff like this so it's quite simple in here and this missing something and just go ahead and give it like all burst here and this should be very very simple now we have all Burton here if we try to go ahead and grab the name from there so just go back with console of the log and say Albert's the name as you can see we can access the Albert or naming you the same thing or the same way with JavaScript in the same way happens to be on time strip as well so if you can go ahead and run this but before running this we can't be able to we have to you call the module into the upload time script so to like include a module into another module we have to export first from the first module in order to be able to include it in the more tulum that we want to like included into so the modular type script we have to export whatever think we want to access from any other modular we wants to import this module from so it's quite obvious I don't know it seems a little bit complicated but simple it's simple as I don't know it's very simple so all you're gonna need to do is say the exports and default so export defaults which means this is like the default export of the object class so out what do you mean well yeah we have to like to go ahead and export you can just use lucky export default in year so you can export this as like unlike a modular so exporting Albert what do you mean by this like just gonna have go ahead and access Albers from the all the modules so if you just go ahead and I to type script and we can import this into here so we say the import keyword on this and we specify which thing running imports we do curly braces in order to be able to define this and we have to specify the same name the same one as in yourself augers to put it third and from were so we need to give it the most lovely ones so we need to use like a relative path and we say modules so as you can see it gives us this and Albert is a grandparent so it's important and successfully with no problems now we can just go ahead and importantly or use this so let me just get moved this console.log from there and we need to paste this so we can just use this from the class and since we are important here and everything should be fine so for like this one think I don't think you need to add into your webpack configuration which is the resolve tab or the dissolve objects in here so why need to ask that because modelers won't be able to work for us if you're not gonna add this image to use resolve extensions dr. s dot dan send JSON so just use this so we couldn't be able to like import and export models between the time skirts and webpack so what that could organize this after other wigs make sure to go ahead and like stop the skips or the webpack script and running again or restart it and everything should be pretty much fine so ctrl s in you're saving it and let me just go ahead and know the distribution opto genius and he would go with gods all good right of us and just console.log so this the same name when we use it in here so when we're gonna initializing ego and parents so as you can see it's working pretty much fine with no problems and as you can see the modeling here is absolutely working fine let's go ahead and now exports the the class or the base class here we were exporting the actual instance and here we are exporting the actual class so just go ahead and explore this and let me just go and import this as well so it's gonna be like a grandparents and we are importing the class let's create another class that are gonna be like a child of this grandparents class so I'm just gonna call the class I'm gonna call it appearance and gonna extend so here I can remember we're using implements this like we were using an interface that we were using some like typing system and we want to like it implements this type system on this class but here we have a class and we want to extend another class from this base class so we use the extends keyword and here we go so we specify which class and we're gonna use the constructor as well so the constructor pretty much if you remember this grandparents needs to name whenever we try to construct or something so that's why we need to go ahead and provide it with a name so we say name it's gonna be like string as well it's quite simple and here so we can access the name or we need to pull the super method and pass the name so why do you mean by the super method super method you're gonna pretty much like go ahead and constructs the like the parent class we are extending from all the base class for extending home which is in this case it is the grandparents class so this your method is gonna go ahead and initialize your creative instances of this grandparents in here so this is what it basically means if you can just go in and hope or that's using Visual Studio code you're just gonna give you like this is the construction of the good curtains class with the take kinematic abuse as or a nonhumans name of the string and like we chose the grandparents so just gonna initialize this if you just go ahead and omit this is gonna give you an error so makes it to do with each time so whenever you extend something and try to use the constructor you have to call the super class in order to initiate the first or the base class first then the second class so here we go we've got this now for the actually if we take a look at the grandparent class in here and if we try to go like actually all birds so that we have created the instead of created we can easily go ahead and change the name and save like this is gonna be like a new name and whatever and we can just manipulate it however you want but we don't want to do this we wants this name attribute to be private and only be accessed or only allow it to be accessed on the class code so we can't access this name variable outside of the class code so only the class could be able to like access and change or and guess the actual name so to do that we can use the private key word so we can say private and then here whatever you try to like say it's gonna be awkward and we say dolls we get no name so whatever you say name name is not gonna be undefined in touched here it's gonna prevent us from accessing the name and also if we try to say it like this private we won't be able to access from the parent class the class or the child class that extends the grandparent class or that extends the base class so therefore we have to change it from private to protected so protected basically means it is gonna be a private so we won't be able to access it outside of the class code and we won't be able to access it from the child or from the like extended the classes this is the base class and this is the extended class so we will be able to access it from this class but we won't be able to access it outside of any back the class scope if it's not extended or it's not the original class so it's conceived quite basic we use it like a projected book like keyword here in order to say this now we can go ahead and access this right here and we can just say like since name and this function what it gonna help all of us is to like change the name so we can see this is gonna be like a new name so just gonna do like a string and I'm gonna just go ahead and say this name as you see we can access the name right here and we can say equals to the new name so quite basic and also we can have like a getname method so getname method what it does you're just gonna write future announce the name so we can this return this thoughts this don't need so basic and quite simple as well so all in here we can just go ahead and return in here as you can see if we can just go ahead us Albany we won't be able to since it's a private and we won't be able to like return this anyway so yeah here we go well use it this I'll just go ahead and create an instance of this appearance class so I'm just go ahead and call it Edward and this Edward class or this either occurrence is gonna be like instantly from the internal current time and equal to new parents objects and as you can remember it takes the name so it's gonna be Edward of course so here we go we've got Edward right there and this is all we gonna need to do it let's go ahead and now what console.log the name and say like this is your name and we can use Edward don't get name you know Jax is the name since the attribute is already like private so you'll be able to access directly only by using like a getter so this is a call together and this is a called a setter method so only using the getter method we would be able to get and finish the name now we can just go ahead and clear this and run the node address and we guessed like name Edward and here we go so this is like working for us perfectly we're getting the name from the base class and we just protected and we are using like a getter to do all of that so this how it pretty much works in a very very like a basic way and this one although think about classes are very special is you can go ahead and add like a read-only property into this class so read only problem is it's it have one initial ball you only so like a properly and this week or probably is a little bit more special than it cost broccoli on on the typescript so like let's say a family name or something like family name and it's gonna be like Brooks or something and this is the family name so you have to say that for equal sign in or sign of volume and this is gonna be read-only so you won't be able to change this value whatsoever so if you just go ahead into here I'm Edward and we say like family name equals something it's just gonna give us an error right away saying that this is a read-only cannot be assigned and blah blah blah and blah blah blah so yeah this is only to be able to like you can just go ahead and fish or get the actual family name but you won't be able to change it whatsoever so yeah it's quite so a simple thing and quite a special thing you can go ahead and use it if you really needed to and one other thing about the classless world is the static keyword so static basically me is gonna be like it's it's independent from the actual class instance so what I mean by this like the class the static if you can just take a look on this one this dot name is we are actually accessing the instance of the class and we are setting the name into equals to the new name and whatsoever and this one as well we are returning the instance class name and so on and so forth but the static has no instance it's an independent completely independent from the class instance which means let's go ahead like say this is gonna be lucky gender and sis appearance let's go ahead and I don't know I know the parents could be like a male or female or another genders but the gender in here what I mean by this is let's just go ahead and say for example it's gonna be like a male okay so the gender or the static this one is gonna be like a meal and it's a static so it has one single thing and it's pretty much ice cream seeing if you can take a look on the read-only and the static you might think like they are the same thing why we need to use a static over read-only and when we do do that so we hold on a second as I've said like the static is an independent from the class instance while the family name or the read-only property is not serve can take a look Edward is pretty much a class instance of appearance while the plant itself is the class object so what I mean by this like if we go ahead and say Edward dot you won't be able to find the gender in here since I said it's a static so otherwise you can just go ahead and tie but the parents and my knee turns okay parent and you can just like cross over and we cannot find the gender our to be right there so we can just go ahead and access any gender I queued and that you're going to have the male like a sign that you and the mail volume whatsoever so we don't have to duck declare the or create an instance in order to be able to access the static variables in our class so this is the special thing about statics variables in a class and how they pretty much work it's quite basic and it's gonna be like very beneficial for you to use it over and over again now the last thing we need to cover about this are enums so if you are already like a programmer with the static typing languages as I've already already said C++ or C or Java C's but not pretty much or Java so you should already be familiar with enums right there so in ups are really nice types or like data structures that gonna help you will last whenever you try to create like multiple stage or something let's say for example you have two people refer an enum first you say the enum keyword then you give it like a name let's say there's gonna be like um status status okay and you open up curly braces so it's pretty much like interfaces or classes and here you say which are the types of the enum you want to declare so let's say like this is interactive type so always like a naming convention enums having like in all uppercase letters so two like this to say this is the enum and this is what can say like octave and there's like a disabled and like ongoing or something quite basic things now just go ahead and you to start use dots octave and we can get the active you can just go in and over that yes QC studies talk to you is like a number or like we're having a type of a number which equals to zero this one is one and there one is too you can just go ahead and do this like I don't know you can restrict type this to a string so you can just go with a disables work was to disable and we're going to going so here we go can just go in and over this this is string now and you can use an eye string so all of the attributes of the enum has to get or has to have the same type either all of them are numbers or all of them are strings so you can't have like a number and a string and yadda yadda so the old of they have to get the same string or just the same time pretty much so this is about enums is quite special thing you can just go ahead and use this same like if studies octave equals something then do this and do that and blow you all the things so just this is my enums are being used for so they just like it was for checking and for statuses like something like an active or the status of this pop-up or the status of these objects is disabled nearly a tiara a really important thing if you're not familiar with or if you never use this an enum before so yeah i just really commend going ahead and trying to play or play around with enums and saying how they pretty much works in general so that was actually very much guys in this video also really a bit longer tutorial so yeah we've covered a lot of things a lot of in-depth things about classes and modules exports and enums of course on typescript i think us watching you do hope you guys have enjoyed this tutorial yeah we really appreciate all the help all the lines comments and/or cut your guys then next tutorials on the series of learning time script