Typescript Class Example, Typescript Private , Typescript Class Constructor,Typescript Static Method

hello and welcome back to the channel in this video you will learn how to work with classes inside typescript so let's jump right into it [Music] so here i already prepared a project where we can write typescript code and i already made a video on that so if you missed that i will link it here on the top and in the description box below so here we have source folder and maints this is where we're writing our typescript and inside this folder our typescript transpiles our typescript code and we also have here ts config.json where we have configuration for typescript and here our root directory is source and our output directory is this so in javascript we have support of classes starting from ecmascript 6 and actually it is just sugar for working with prototypes and in exactly the same way it is working in typescript but we have their typings this is why working with classes in typescript is really awesome so let's look on the example so let's jump now in source maintes and create our first class and to create a class we're using class word exactly like we're doing in javascript so here is class user and we can write some properties inside it for example let's say that we have inside property first name and we can directly say that this is string and we have last name and it is also string so the main difference from ecmascript 6 that we're using here typings so all knowledge that we have in typescript we can apply to classes for example let's create new method get full name and we know that back we will get a string and now inside we can return this first name because we know this is a string and we concatenate it with string and then with this dot last name so with this we can access all properties inside the class we can also use constructor in exactly the same way and we can provide some data as parameters in the constructor for example we can say that we are providing from outside when we're creating instances first name and last name this is why first name strain actually this works like normal function in typescript and here is last name and it is also string now inside we can assign our properties inside this so this first name equals test name and this last name equals last name now we can create instances of class user for example here we create our first user and for this we're using new user and we can provide our arguments here and as you can see we directly get highlighting from typescript that in this class on initialize we need to give first name and last name and then we're getting the class user so let's provide here for example monster and here will be lessons and save this as you can see no errors because we provided everything correctly of course if we will provide here for example boolean then we will get an error argument of type true is not assignable to string so our class is created as you can see now user is of type user and user is a class this is why here we can write console.log user dot and this is what we have and this brings us to the next point why classes are so awesome inside typescript so as you can see we are getting access directly to everything that we have inside class two properties and a method this is because everything is public what is public in normal languages like for example java we have things like private public and protected which means we can mark all properties and functions inside our class with these three words and by default everything is public which means we can use it everywhere in the class outside of the class in childs in instances and this is exactly what we have now we didn't write anything here this is why everything is public it is the same if we will write here public word and first name so this is by default public we can write here everywhere public but it doesn't make any sense if we will write somewhere private word it will mean that we can use this variable or function only inside the class and this is really awesome because normally for example we have user and we want to make public only this get full name and these two properties first name and last name we want to leave internal and for this we can say here that it is private and this property is also private as you can see we don't have any errors because we are manipulating with these two properties only inside class but here is our autocomplete i am writing user and directly i see that i am allowed only to get full name so i can't access here first name it's just not possible where i get an error property first name is private and only accessible inside class and this is really awesome to separate what you can use inside class and what is allowed outside as a public and in the same way we can use protected and protected means that we can use these variables of functions inside children if we are doing inheritance and we will look on inheritance in a second but actually here we simply write protected and this is working exactly like private or public but here is really important moment to remember all this stuff like private public protected only exists inside typescript which means when we are transpiling into javascript this is just normal javascript code on prototypes so there are no check-ins in runtime no checks in javascript at all so we can check it only type save inside typescript one more awesome thing that we can do inside classes is to use word read-only so we can say here read-only and then for example unchangeable name and it will be string and now we can set it once for example in constructor we can write this unchangeable name equals first name and this is fine as you can see we don't have any errors but if we will create some method for example change unchangeable name and inside this function this is returning void we are trying to set this unchangeable name to full we're getting an error cannot assign to unchangeable name because this is a read only property and this is really amazing when you want to create some constants inside your class you simply need to use read-only word then it is marked and you will never forget that you can't change it let's comment this code out and speak about interfaces if you missed my video regarding interfaces i will link it here on the top and in the description box below but basically the idea is that we can define an interface and then our class must implement it so let's try this out here i will create an interface user interface and this is an interface for our class and here we're saying that we must implement get full name method in other case it won't work and we're saying here that we are returning string this is it so this is just an interface with one function now inside here we can say implements and here the name of the interface so user interface in this case this class must create inside this function in other case it won't work so if i will just comment out get full name we're getting directly an error class user incorrectly implements interface user interface property get full name is missing in type user but required in user interface and this is really amazing when you want to make something shareable and you want to require that all classes that want to use the shareable thing must implement your interface first one more thing that you might need but maybe not that often is static properties so actually here we can write that we have a static property and let's name it max age and here max h is 50 and we even can say here read only so we can't change it and if you don't know static properties are accessible only on the class itself not on instances this means that our user don't have property max age so as you can see here there is no max age but here we can console our class and this is user dot and as you can see here we have max h property so static properties is something that you are getting on the class itself and actually i'm not using them that often but maybe you might need it at some point and the last point which makes classes really awesome is inheritance so we can create a class for example user and we can create a child of that class so we create a class which inherits everything from user so for this we can just create new class here on the bottom so let's name it admin and this will be class which is extending from class user so just with this code we are getting all stuff that we have now inside user inside our class so if you don't believe me here we can create const admin and here we're making new admin and inside we're providing foo and bar and as you can see it already worked because this is a constructor and we are providing something inside now we can write here console.log admin dot and we are getting access to all properties that were defined inside our user class and in inheritance of course we can override everything that we want or provide new methods for example here we can say that we need new private property editor and it is string and now we can create two new methods set editor where we will set this editor for example here we're providing editor as a string and we need to return void here and here we're setting property this editor to the editor that we passed and of course we need then get editor function and we are returning here string and here we are returning directly this editor and now only our admin has all these things inside because here is admin dot and here for example get editor set editor and of course property editor is not accessible because it is private and our user doesn't have all this logic so this is inheritance this is how it is working in ecmascript 6 but with typings it's much much better safer and easier to use so as you can see typescript gives us a really nice possibility to write classes like in javascript but in more strict way like java or csharp maybe and also if you want to improve your programming knowledge i have a lot of advanced courses regarding different web technologies and i will link them down in the description box below so don't forget to check them out and if you like this video and you want more content like this don't forget to put thumbs up to support me and subscribe to the channel and if you didn't like this video consider watching it on increased speed it might help and i will see you in my next video

Channel: Monsterlessons Academy

Views: 3,139

Keywords: monsterlessons academy, classes in Typescript, classes and interfaces in typescript, interfaces with classes in typescript, classes typescript tutorial, typescript classes tutorial, creating classes in typescript, readonly in typescript, private public protected in typescript, static in typescript, inheritance in typescript

Id: Brj6vBnc2Lc

Length: 12min 8sec (728 seconds)

Published: Sat Feb 13 2021