Let's Learn Typescript | Interfaces and Generic Types (The Typing System) 02

everyone knows I'm only doing welcome to a new video tutorial on the series of learning type skill we are in the second tutorial we're going to cover a lot of things in this series but in this tutorial we're gonna go into specifically covering one of the main or one of the main reasons why typescript actually exists just because of this one so I'm just gonna learn about types and the typing system behind the typescript and why type scribe actually uses this type system and I'm just gonna learn or we're just gonna go and introduce the interfaces so make sure to go ahead and watch the last video tutorial the getting started you haven't already so yeah we have just set up the project I'm gonna work on and then we've done a lot of things like the introduction to the typescript and why you should use your why you should consider using this type school language instead of instead of JavaScript so one other thing also makes it to go ahead and check out the documentation if you really wants to learn more about typescript or any advanced users anything you wanna just recheck or a reference to just go ahead into the documentation the opera documentation typescript language or game descriptive documentation and you can just find whatever you want to look for out of there so here we go make sure to go ahead and set up the project as I've said in the last video so interfaces are basically are or are actually types so the typing system of the typescript is you told typescript which type it is so it's like static typing language while javascript is dynamically typed language it's not aesthetically so you don't have to specify at the time you are actually going to use a variable for or the ability to is variable and whenever you try to compile this code pretty much like other languages do C++ or Java they use static typing and while Python or Ruby uses a dynamic typing system like pretty much JavaScript over here but typescript introduces this typing system with this static typing system to make it a little bit better and to give you a little bit more control while you still can use JavaScript a lot right out of the box what types could give you a little bit more than the best users and it's Kim it's being actually used by a lot of teams big teams actually a lot like our BMV and loads of all the teams that use typescript for creating their own applications so let's just go ahead and go with the typing system so as we have said in the last or as well as of York City introduced it must be destroyed I've created a simple type calling me and we've given a string so to do it type all you're gonna need to do so first you declare a variable as you normally do in JavaScript then you give it a colon colon that means you are actually going to put the time for this variable so in this case we're just gonna put a string it is gonna be a normal string over here and you put an equal sign in order to a sign about or I don't know like assign the quality to this variable so here let's say like hello world or something very quickly so hello world and you go so this is the type system is quite simple but in this particular case we can't just ignore this one type scripts is smart enough in order to know that this is a string this variable is changed since we are actually assigning the Barlowe of it into a string so it's like smart enough to know that this is junk so if you can just go ahead and over this use your visual studio code entire system it's just gonna tell you that this is a string right over the box so you don't need to specify sync but we still can do that well it's just gonna help us while we read our code just gonna help us identify what is this and what it's not which type we are actually using and which type we're not in da da da da it's gonna give you a lot of information about your current and how it's actually tied up and how it actually works so as you can see it's quite simple to declare a variable to give it a type now you can plug it like tab plenty of permissive times like the times already exist in the typescript language or the language itself like the string the number of the boolean and you know the primitive times exist pretty much when each language on every language in the planet Earth so let's say like there is a number in here so you just type in a number and you give it like whatever number whatever number you like like this a mole or an integer number it doesn't really matter he accepts all of them so you can see like 50 point 12 or something like this like whatever number as I've said can accept this without problems the last thing is the balloon so you type in the boy it's not blue or something you must tie but the whole thing with poopy word bullying in order to make that and it takes two holes regardless what you want so yeah you should be familiar with this and those are the primitive times - what types gets actually your house already built in also there's an array and there is an object so as you already know but they are not gonna be bad thing objects you won't use them that much because objects needs properties to be assigned to and to use properties you need to create another types or you create a custom types and so on and so forth so we'll cover this later on this video so the next thing is like custom typing or you create your own custom types for using it on your code for using it for the compilation time so to create a new type here when it comes like the interfaces so you need to use an interface interfaces basically you are actually going to declare a new type and you can just use whatever you want so part of interface is typing the interface keyword then you give it a name and usually name is gonna start really capital letters so like camel casing capital letter let's say this is gonna be like a pet so let's stick or a type for a pet and to declare that just open up the curly braces and now you can just go ahead and declare the time toy scan as you can see the type has like primitive times a time so this one is gonna be an object so object has like multiple properties or this could be an array this could be whatever so an interface you can just go ahead and introduce some objects or do the typing or tell time scale this is the typing of specific objects which you can put in unlike in this type or the or in this interface you're actually going to create you can put like a primitive types over here so perch what if that's hard like name so first a name and you give it this this is gonna be like a stroke and as you can see here the ends with a semicolon here rather than just using like a colon or something but you still can't use that it's completely variable but I really commend killing with a semicolon and you can give it like the pants you're gonna have I don't know something like the color of its skin or something also string and you can give it if this is like gonna be a fat pad torn oh this is gonna be like the bullying either true bolson you can do what everything so you can see you can deploy this this is like a custom time no we have a custom type called pets you can go ahead and use that right out of the box so that just go ahead and according to be like this is my pet and we give it the time called pet that we have just the cord and we can just assign a value to it so since this is gonna be on objects so always we need to cover an interface is gonna be an object or even like a couple of properties you can have any properties you give it a functions you can give it whatever so this block just dropped in here it's doing a color and an approval in a variable now you can just now go ahead and do this right of the box so I mean you can say ability or something like it can't name you can give it a color about white or something and we can give it like if this is a pattern now and let's just go with false right now we have declare variable using the the type that we have created the custom time that we have created for the bet now here we go the poor object right now uses this one and for some of you might ask why we'd be lucky use this one rather than just going with the old baggy way or the old JavaScript way we just declare know Jags then we just start assigning to it right of the box without doing all of these things so yeah bear that in your mind using times can help you will launch while either reading your through your source code or you can just you know whenever you try to distribute your source code or share this with another developer or another team making easily go through your source code and read it through that they can just easily since understand what you're doing why this type is exist anyway why you're using this one inside until the other one and someone on so forth they to understand a loads of things from using this typing system also Waikiki what this one can protect you from here's the box so they can protect you from box leaking just to help you figure out where bugs are on your source code and making just save the word for you or save the date for you I know a lot of teams another a lot and in a lot of conferences or TED talks are talking about how typescript saved their life by just moving their project from JavaScript to type script they figure out a lot of bugs on their source code as they figure out a lot of things actually happening behind the scenes they want to notice or they wouldn't notice if they still use JavaScript by the movement type Scrivens i've skipped saved the word for them so yeah just bear that in mind just give it like a month or two and you can go ahead and see the actual things that touch code gonna bring for you and save the day for you pretty much so here we go so we're better I can see it it's quite simple to declare a custom type in him I'll just go ahead a little bit more deeper in here and we'll just go ahead and extend a time from a little type like use inheritance in you so we're going to run another interface and it's gonna interface is gonna be a dog so let's just go ahead and declare a dog for this one it just gonna extend from the pet so the peptide the dog is a pet pretty much and while the dog can have a little bit more arch abuse than the bed the best has this generic contributed the name the caller the fat why the dog has this attribute alongside this boot is gonna have like another custom attribute the pet doesn't really know about so this is what inheritance is about now you can just go ahead let's say the dog is going to be old and the old is gonna be your function you're gonna use like the es6 or a functional here and when like using or declaring the type of a function you don't just go ahead and do this if you just go in and over that's just gonna tell you that this dog yield function is like having no parameters while it returns an object so we don't want to return an object we want to return a point so void means there is no return time for this object or for this function pretty much so this function does a thing but it doesn't return a lot so point or what this is what void actually mean it doesn't or this function doesn't gonna return so we're just gonna like tell it that the real function won't return it doesn't have parameters if you can just go ahead and program edges here you can just go ahead and put parameters in parameters pretty much meet at the time so you need to specify the type of parameter in order to the function or you know the typescript compiler code correctly so here we go we have to plug this one and I'll just go ahead and do another dog and it's gonna be I don't know something like Jack or something I don't care so we just covered name this my dog for now and you're gonna give this like the dog sighs so it's gonna encourage from the bomb type and it's gonna see in here we can just put in the name so it has this attribute or it has these properties alongside this property is gonna have the old function so let's just go have a with I don't know I can't quite figure out which dog you need or let's just go with Apollo in here Apollo seems a really nice dog name and with the color about let go with yellow color I'm not that big guy who knows how to put colors together or something it doesn't really matter and the plan is gonna put a full solar just go ahead and put it true in here so and right now as you can see we've got like a problem you know missing type in name string so the yell click missing we need to find the yield in order to can play you to the declaration of our variables so if you're just gonna leave this like this you're gonna give us error because the dog needs besides all the bats and all alongside all of these properties it needs a function declaration so let's go ahead and look for a function we give it there's gonna be like the yellow and the yolk is gonna take a function we're not gonna use the arrow functions because the this keyword is not gonna available on the scope of the arrow function one's gonna be available in the normal function declaration I'm just gonna like Gillihan whenever you type in yolk or whenever we call the yelp method what we want it just gonna like console.log or like the name of the doc so whatever I don't know what dogs do pretty much free open and I'm just gonna with I'm just gonna put this dog's name so I'm just gonna put the name of a song alongside that so here we go this should work pretty much for an us now if they tried to call my dog and we call a function it just gonna work for us pretty much with no problem so we can just go ahead and with dog my dog and yo now we can just yo the name of the top so yeah in a quite simple way this is what we can do for us now if we try to go ahead and save as make sure to run the watch because just gonna go ahead and take the code and compile it for you and put it into the outdoor TS if you're not actually familiar with that which is cool watch the last video tutorial about getting started and saying up the environments that we working actually on now we're just gonna use no ideas for running this code you can run this code on the browser whatever since in JavaScript we're just gonna use no tears since we're just launching information so just got a little bit more easier for us to use so we can go with node and we concur with photo / distribution objects and the objects should run for us and as you can see in here whatever and the name of the dog in here in this case this top name refers to the Apollo and we've got we've got fence to log data to the console so as you can see it's quite simple think and using these things you can just extend the dog from the pen and someone and so forth it can do apply all the things with it just using interfaces and interfaces actually pretty much or pretty much all types and someone and so forth herbs so they are quite simple and quite powerful at the same time you still just if you can't quite a reach out or can't quite a figure out why using this typing system why you can use the normal way just keep going with typescript try to use it for a couple of months and you're gonna understand the power behind typescript and why the type of system is quite like you know necessary for you to use but if you try to use it like different variable without putting the time let's say gonna Jean like put up an objects in here and it's refer to an object source continuing on to object now if we try to add properties into these objects it is gonna give us an error with and under point properly on the object so you can you can't do that so you can try and in here to put a name and you put it like to slap interest or something like this as you can see if you just go ahead into the TN slings error property name does not exist on the type empty curly braces which means pretty much an empty objects so you have to give it like you can declare an inline like time so we're not using the interface keyword for that so you can just give it like a name and there's gonna be a string and yeah you should like to put a colon in here instead of like an empty this and you can just rather then put it in here or just put a name right over there and I'm just gonna work for you as you can see the error has gone and that means everything is working pretty much fine so you can see we can put an inline type declaration for our variable for any variable if you have like a really small variable you can just go and use this amongst time but I really recommend doing it interfaces can see it can be exported over different modules in over different setups and like packages and you can use them whatever you actually want so yeah the other thing you want to just know about typing system in are the general times so there's two new types if you're definite we're gonna type like templates from C++ or in Java so yeah directs types already exist in the time script language so you can use that right of the box and squishy so types of codes uses this on a functions pretty much so you can just deploy a function and you can say I don't know like you can go ahead with this is my function or convert it to string let's go with convert number two strings so this function is gonna take a number and convert it to string or convert it since roads generic so convert a string convert any any variable passed to this function and just gonna return to you a string so to declare like a generic type he products like brackets in here and you give us the generic type you're going to use most likely we're going to use a t4 templates which stands for in place pretty much and they give it like clearly or racist telling you that's the function and you must give it a return type so to declare a function you give it a return type you use the colon at the end of the function declaration here in order to tell it what T is going to be a return type if you're just gonna omit this or you know this they're just gonna know that the return type is void which means this function is not gonna return anyway so we want to return something we want to return a string so since our function it takes a variable any returns change now we should return it otherwise it's just gonna give us one reverse you can see in here so yeah we take the this one and we should like give it the argument of type T so we need to pass in any arguments with any time and it just gonna turn us the string so here what we want is return a string using these trim constructors so we can just skip it on human in here and it just this this function or this constructor just gonna take any variable either a number boolean or whatever and we're just gonna what converter to string and return this chain for us and as you can see this is a generic function it's quite simple thing or can just go ahead and call so long this to like to be console and we can give it like converts to string and whatever we can give it like a number like 512 points or let's just go with 512 in here and we can just go for the console right here run notice again and we should probably go ahead and find objects don't name is lamp anyways and yeah we'll just go ahead and get rid of that it's just gonna give us a really awkward Gator so yeah those just will let me know that there is in line typing systems and stuff and as you can see to showing and it is not 512 to make sure that this is an actual string not a number we can use the type of keywords check with the type of this return or or the return type of the function so we need to make sure that this is a string and our thing is working as concedes words you can just put in here like boolean or not an actual you can put like a true or something you can save this you can you can run this again I'm just gonna see to shrink and I'm just gonna give us a string again so that means we pass in whatever time and if you just gonna return us a string and whatever charge means that we're gonna use a generic type so part in a number string a boolean or whatever although think and it is gonna do the job for us I correctly you can just benefit from this function or from this generic typing system on the typescript language on many ways actually on a different situations on your code so you can just have one function can do a plenty of things for you which is pretty great for us as programmers we want to do a lot of things so that was actually for the type of system that was quite simple thing and actually very very powerful for you and one of the basics why types could actually exist in one a nearby a typist system so it's very very powerful you're gonna need it on your whole life who've tried or if you actually decided to use typescript for the rest of your whole life so you're gonna need this typing system and you need to master it so just try and go ahead and work with this one I don't know do a couple of examples try to implement something some example I'm just gonna like clear the way for you and you can just go ahead and understand this right upper box so think I was watching a route to help you guys enjoy today's tutorial that was a very basic thing in the next video tutorials gonna cover more and we're just gonna go in deep mourning the depth of the typescript language I'm gonna cover more topics and hopefully this so thanks for watching again as I've said I will catch you guys in the next video