Learn TypeScript and Build an API

so let's go ahead and write your first typescript code i have visual studio code open and i'm gonna go here and you can see that i have this folder which is ts tutorial so that's the folder that i have opened in visual studio code so you can click here to create a new file or you can just click on this little icon here and i'm going to create this file called hello.ts so the extension is ts because this is the typescript file and then i'm gonna press enter and in here what i'm gonna do is just type in console.log and then i'm gonna put open and close parenthesis and in here i'm gonna say hello world and then i'm gonna end with semicolon then i'm gonna collapse the explorer so we only have to see this file right here and then if you look to the top right corner i have this little play button here and i'm just gonna go ahead and click it and you can see i have hello world so this is a typescript file and this is typescript code but if you look at it you might be thinking well this looks exactly like javascript well actually it is javascript in javascript you would exactly have the same thing but the only difference is this is the typescript file so therefore you can see this code is typescript code so in the next lecture i'm gonna go over some other configuration and have you install typescript on your computer and then i'm gonna show you how you can make your visual studio code if you don't have it already i'll show you where to download it and i'm gonna show you how to configure it so that you can run your ts files or your ts code or typescript code inside of the vs code id itself so that you don't have to go use the browser and this is the setup that we're going to use throughout the course so that we can see everything in one window so we're going to write our code on the left and then we're going to run our code and see the output on the right the first thing you're going to need to have installed on your computer for this course is going to be node.js so if you navigate to nodejs.org you should be taken to this page you can download either version that you see here it shouldn't be any problem for what we're trying to do so you can either download the latest version that you see here or you can download the one that's recommended for most users so depending on when you're watching this video these versions might be different but you can install either one of them it doesn't really make a difference and we're not going to be doing anything with node.js per c but we need access to the npm which is the node package manager because we need to install all the software that we need so make sure you have node.js installed on your computer in the next lecture i'm going to show you how to download and install task script on your computer like i mentioned before we're going to be using visual studio code throughout the course so you'll need to have this id installed on your computer you don't have to have visual studio code but if you want to have the same setup as me and follow up with everything that i'm doing then i would recommend that you use visual studio code instead of another ide but if you're comfortable with whatever id you're using and you know that you'll be fine with it then that's fine but for this course we're gonna be using visual studio code so if you navigate the code that studio code.visualstudio.com you should be taken to this page and all you have to do is to click on this drop down and you can install it for your operating system as you can see here it's cross platform so you can install it for mac windows and linux so go ahead and navigate to this website and install the version for your operating system and the download should be pretty straightforward and the install as well so you can just go ahead and accept everything except the license and then go through the prompts and then everything should be done so make sure you have visual studio code installed and i'll see you guys in the next one so i'm back in visual studio code and at this point you should have visual studio code installed if you didn't have it already and you should also have npm install so once you have these two we're gonna go and click on the terminal and then click on new terminal so that we can open a new terminal and i'm gonna make this a little bit bigger so you guys can see it and then i'm gonna zoom in a little bit and what i wanna do is to run npm so that's node package manager install and you can also do i for install so i'm going to do the shortcut which is i and we want to install typescript globally so i'm going to put dash g to install it everywhere on the computer or to install it in a way that i can run typescript command no matter where i am on my computer and then we're gonna type type script so that's gonna go ahead and install typescript on my computer i already have it i'm just gonna go ahead and run it but i already have it installed so i'm gonna go ahead and run it and you can see that it updated some packages for me but i already have it installed so your output should look a little bit different but you should also have it installed so now what i can do is if i can do tsc so that's calling the typescript compiler and then i'm gonna do dash version and press enter and you can see that i have version 4.3.5 so that's my typescript version and that's how i know that i have typescript installed so go ahead and follow those steps and have typescript install all you have to do is to run npm install g for global and in typescript and make sure you don't get any errors in your output and then after that you can type in tsc for typescript compiler dash version and that should give you the version of timescript that you have installed on your computer so we're almost ready in the next video i'm going to show you how to set up vs code so that we can run typescript code and visual studio code so i'm back in visual studio code and i still have the terminal open i just type in cls so that i could clear the screen and i'm gonna see if i can make this a little bit bigger i want to install another piece of software and this is something we need so that we can run the typescript files we're gonna use npm again so i'm gonna do npm install and i'm also gonna install this globally so i'm going to do g and this is called ts node and it's a package which allows the user to run typescript files directly without the need of pre-compilation using the typescript compiler so we can run the typescript files directly through vs code without having to compile it to javascript and then run the javascript version of that so npm install g and then the name is ts node make sure you have this installed i'm going to run it anyway but i have it installed so i'm gonna run it you can see it updated one package for me but i have it installed already so i'm gonna type in cls again to clear the screen so now we're almost ready we just need to install the plugin so that we can run files in vs code so you see that i have this i'm gonna go ahead and get rid of this terminal so you see that i have this run button here maybe you don't have it if you don't have this plugin installed so let's go to the extension and the extension you need to install is called code runner so if you search for code runner so for instance i would come in here and say code runner and make sure that i look for that one so the one from one hun so make sure you install that so you can see that i already have it installed so i don't need to install it anymore so you might have to restart i'm not sure i didn't have to restart myself but you might have to close vs code and open it again after you install it but i'm not sure so if you don't see the little play button up here then maybe you need to you know close it up and then restart it again but that's the extension that we're going to need to be able to run these typescript files inside of vs code so make sure you have this installed so now your vs code should be almost ready and the other thing is let's go ahead and run this file again okay so we have the same output and i'm gonna get rid of the panel so another thing is you see that i have my output on the right that's because i want you to be able to see exactly what i'm doing so yours should be at the bottom somewhere here if you didn't change it already but to change it you just have to right click in this area and you can see that i can move it to the bottom so i can click on move to bottom and you can see i have the output at the bottom so if yours is at the bottom and you would like to have it on the right like myself then you can just right click in this area and then you say move to right the last configuration we need is in the settings so if you go to view up here and then you click on comment palette and you search for open settings so it should be the first one that comes up the one that says json and go ahead and click on that and i'm gonna see if i can actually i'm just gonna minimize this a little bit so you can see that i have some configuration for a code runner so the plugin that i showed you how to install and i have the show execution message set to false and i also have clear previous output set to true so for instance if i change this so if i change this to false and then i change this to true and save this file and now if i go back and i'm going to show you what's going to happen if i run this again you can see that we're getting some extra information which can be useful in some situations but in our situations we don't want all this all this stuff we only want the output of our program which is the hello world right here so if you don't want to see all these things which should be the default for you then go ahead and add this line which is show execution message and then set this to false and the clear previous output so if i go back again and run this again you can see that it keeps the same output that we got before when we ran it the first time so if you want to get a clean output every time you run your code then you can go ahead and then add this configuration so clear previous output we're going to set this to true and then save the file now if we go back and then run the file again you can see it's cleared and then we only have this clean output and another thing that you might have is the minimap so if you look down here you see that i have editor minimap enable and then that is set to false so if i set this to true and you can see here that i have this minimap here which is very good for navigation when you need to scroll very fast like up and down but in my case it's it's gonna take some space here as you can see here it's really small here but you can still see it it's gonna take some space and i don't want that so i want to use this entire space for our code so i'm gonna go ahead and set this back to false all right and save the file so now you can see that the mini map is gone because we're not going to be using that so this is my settings and i'll leave a link in the description if you want to just copy and paste this but it should be pretty easy it's really just three lines of code so once you have all this in place you should be ready to go so i'm gonna go ahead and close this configuration file and run this one last time and you can see we get the output that we want clean without anything else something that you probably didn't see when i was running this line of code is this configuration that i have here you can see that i have this ts config file and if you don't have it and you try to run the code like using the play button then you'll get an error so for instance if i go here and just delete this file all right and then i try to run it again you can see that i have a big error here because i don't have this file so i'm going to clear this and what i'm going to do is to create this file now you can create this file manually but that would be a pain what you can do is to use the ts compiler so i'm gonna go back to the terminal as you can see here if i click here it'll take me back to the terminal and then i'm gonna expand this a little bit and i want to do tsc so this is how you invoke the typescript compiler by typing tsc and then i want to do dash and then init so what this is going to do it's going to create this configuration file for me so that i don't have to do it myself and it's going to put some boilerplate code in there so let's go ahead and run this you can see to the left i have this ts.config file now there's nothing really particular about this file it's a very important file by the way but we're not going to worry about it at this point so you can just create this file you type in tsc dash init as you can see that i just did here and then this file should be created and then you can close this file like you don't even have to go in there at this point and then go ahead and run this and you can see now you get the output so make sure you do that otherwise your code will not work so the first thing i want to cover is comments so i'm going to go ahead and collapse this and we have this line of code here and you can see that when we run it we have something in the output to create comment and typescript you can do two forward slashes and then let's say this is a comment and now if i go ahead and run this you can see we have the same output so this is completely ignored when we run the file because it's a comment and we can do another one for instance we can do it to do we can say to do and then we can say fix login bug or something and if i go ahead and run it again and you can see we have the same output and these two lines have completely been ignored so this is for one line comment and you can also have multi-line comment and to do this i'm gonna go ahead and go down and then i'm gonna do forward slash to asterisk and you can see that it auto-completes for me and then i can go down a new line and then i can do this is a multi-line comment and then i can press enter to go down again and you can see that it put the little asterisks for me and then i can keep going go down again so this is how you can have multi-line comments and type scripts so you put two forward slashes if you only want to have a one-line comment and you put the forward slash two asterisks and then one asterisk for every line and then you end it with asterisks forward slash and then you can have as many lines as you want inside of this forward slash double asterisk and then asterix forward slash if i go ahead and run this you can see that we still get the hello world and all of these lines they have completely been ignored and it's almost like they're not even there so this is it for comments they're really useful by the way because sometimes you really have to comment your code and as a developer i remember a couple times where i really had to put comments in the code because uh the logic and the function was so complex and we didn't want someone a later to be so confused then we had to put a multi-line comment so that you know later if there's a developer that comes down the line then they can look at it and understand what we're trying to do with this function what i'm gonna do is rename this file so let's go into the file and i'm gonna right click and then rename i'm gonna name it comments so everything that we go over i'm going to create a file and then you can have it for the reference so we just covered comments so i'm going to name these file comments the next thing we're going to look at is how to declare a variable so i'm going to create a new file and then i'm going to call it declare variables dot ts and i'm going to close this and collapse this and give myself a little more room so to define a variable and typescript you do the same way you do in javascript so you use the let keyword so for instance uh let's say i'm defining a company so i'm going to say let company and then set it equal to a value in this case i'm going to set it equal to a string and then let's say google so this is how you define a variable and it doesn't matter what type of variable you're defining so for instance if i want to define a boolean is male i can set it equal to true that will work just fine i can also define a number so i can do let me put some more space here so they let lottery number and let's say this is 77. so you can do it for numbers as well and you can also do it for objects so i can go down a little bit and i can see let person i set this equal to an object so i'm going to put open and close curly braces and let's say the person object has a name so i'm gonna say name set it equal to a string and i'm gonna say junior and then i'm gonna give it a location so location then i'm gonna say this is gonna be another string let's say philadelphia so you can also define any kind of variable with the let keyword and that will work just fine so if i go down and do console.log and let's say i'm trying to log company and i'm gonna do this for everything that defines and let's say is mail and then we're gonna also log lottery number and then lastly we're gonna unlock the object so i'm gonna say person and then i'm gonna go ahead and run the code and you can see we have google true 77 and then we have our object printed here and i can also access a property on the object so for instance if i want to just print out the name i can do that and you can see i can access the location or the name so if i want to print out the name i can just select the name run it again you can see we have the result here so this is how you define variable you use the let keyword another thing we have in typescript is it's constant so we can go down and we can say uh we're gonna define a constant and let's say this is pi for example so i can do pi and then set it equal to 3.14 just like that now the difference between using the let keyword and using the cons keyword is that once you define a variable as a constant then you can't reassign anything to it so you can see down here i'm defining this pi and by the way it doesn't have to be uppercase but it's because it's pi so that's why i put it uppercase but i could do something like pi that would work as well like lowercase pi so if i try to go down and then say pi and then set it equal to something then you're going to see that it's going to give me an error it's going to say hey there's a constant you can't reassign something to it or you can't reassign anything to it so that's the main difference between the leki word and the khans keyword but you can use constant whenever you know that you're not going to reassign something so funds i can say cons and then i can say city and then i can set this equal to let's say new york and that will work just fine the only difference is i can't reassign on this variable so if i go down again and then do city and then set it equal to another string you can see that it's giving me an error because this is a constant you can see i can't reassign it and if i want i can console.log that as well so i can copy this go down here paste in remove this and then i'm going to try to console city and then let's say i want to console pi as well so i'm going to comment those out just so we can have a clean output and then i'm going to run it again you can see we have new york 3.4 now another thing we can do is to use the var keyword you can also use var but i wouldn't recommend it but you might be asking why can't we use var well you can i can say var let's say hometown for example and then i'm going to set this equal to miami for example let's say this is my hometown now that would work fine and i can go ahead and console log this so if i go down and paste this in and then let's say i want to unlock hometown and run this again you're going to see miami now the only difference is with the var you have global scope and you also have function scope so those are the two scopes that you have when you define your variable with var like if you know javascript then you already know that but with the let keyword in addition to global scope and function scope you have something called black scope and i can show you a quick example so if we go down here and let's say i do if let's define another variable first i'm going to say let and that's going to be like a dumb example so i'm going to say let is what did we use up here so we use is male so let's do is female is female and let's set this to true and let's go down here and i can say if he's female and if this is true obviously we could just used the word true here and i'm gonna say let gender equal let's say we're gonna set this to the word female so now what i get with the let keyword is this variable gender is only available inside of this bracket or inside of this block so this gender is not available outside of this block anywhere else in the file it's only available inside of this black scope and what this does is it helps us write better code or cleaner code when we have uh you know a scope like this which is a black scope if i were to define this as a var then it would be available outside of this block so let's say for instance if i try to access gender so if i do gender you can see it's not coming up if i try this dot gender not coming up so that's the main difference between the let keyword and the var keyword in addition to function scope and global scope you have black scope so that's how you define variable in typescript you can use the let keyword and you can also use the cons keyword the let keyword you can reassign a different value to the variable with the const keyword you can't reassign a variable that's going to give you an error and for the var just just don't use var even in javascript the var is not really used if you're using the latest versions of javascript so in typescript don't even think about this var keyword just use lead or const when you need to define your variable the next thing we're going to look at is the string type so types are a big thing in typescript and even the name of the language came from that word of type because one of the main features that you get with typescript is that you can give your variables and your object or everything that you're using you can give them a type and you saw that earlier when i showed you this example with the declaration of variable i didn't show you how to type those variables but there's a thing in typescript that infers the type of the variable depending on what you assign to it so for instance if i over of the company you can see that it's telling me that this is a string and if i hover over ismail it's telling me it's boolean lottery number and so on so here we're gonna look at string type so when you want to give your variable a type or your object or type in typescript you're gonna define it so i'm gonna say my name for example and then i put a column and then i pass in the type and this is gonna be string type because name is usually a string and then i can declare it like this so i just declare it i don't assign anything to it and since i declared as a string i can't assign anything else other than the string to it so for instance if i say my name and then i set it equal to let's say 99. that's going to give me an error because up here i said hey the name is going to be of type string so that means that i can't assign anything else other than the string to this variable and you can see that it's telling me exactly that's that's what the problem is however if i change this to a string then it works fine and then i can put here my actual name you can see it works fine you can either do it like this so you define the variable you give it a type and then somewhere down in the code then you assign something to it and you can also do this so i can come here and i can say equal i can pass in my name here again that works just fine i like to explicitly put the type in so that i make sure that this is a string but that is just my style but i've seen a lot of people just leave out this part because typescript is going to infer that this is a string anyway because you're assigning a string to it and you can also use double quote so i can say my name and then set it equal to i use double quote and i can pass in my name here as well that works just fine you can use single quote or double quotes and you can also use backtick so i can go down and then i can say let i'm going to define a new variable and i can say it's something like car brand and then set is equal to i use backtick this time and then i can say acura and you can see that works just fine and if i put my cursor over here you can see that you say this is a type string so it infers even though i'm using backtick it infers that this is a string and i could do this if i wanted i could just see this is going to be of type string and you can see that it works just fine so typing your variable is very important so i can give you a quick example so i'm going to go up here and then let's say i'm going to define a function and we're going to look at function later but i just want to give you an example let's say say hello for example and then we're going to say this is going to take a name and we want that name to be of type string so we're typing the variable inside of the function and we can even type the whole function those are things that we're going to look at later but i just want to give you a quick example so we're going to say this function is not going to return anything so the return type is going to be void and then here i can say console.log i can use backtick so i'm going to say hello and then do template string so i'm going to do dollar sign open and close curly braces and then here i can pass in the name just like that and then i can go down and then i can call the function so say hello and then i can pass it my name and that should work just fine now if i go ahead and run this file you can see it says hello junior but if i didn't have this type here for instance types is going to assume that this is a type any so if i put my mouse over here it's giving me a warning that you know i don't have a type for this and this is something you can change in a configuration if you just pass in something here and you don't want it to complain like that or you can just say all right this is going to be of type any but by default if you don't define the type of your variable then it's going to assume it's type any i can come down here and change this to a number and it's not going to complain and i can just run this you're going to see it's going to print out just fine hello 55. but in your code you probably don't want something like this you want your function to take a name and that's going to be a string so you specify that it's going to be a string and then here you're going to get an error at compilation because you're not passing a string here but if i pass in a string even though it's a number but it's a string because it's in single quotes then that works just fine and i can go ahead and run the function you can see it works just fine so i'm going to delete this function for now because i don't want to confuse you but you can already see where this is going but when you're defining a variable of type string you can put select keyword to define the variable and then you put a column and then you put the type which in this case we're looking at string and you can put single quote you can put double quote and you can put backtick and backtick is also very useful because you can do template literal with it you can include actual variable inside of the string itself which i use a lot and when i'm coding so this is how you type something as a string in typescript the next type we're going to look at is number type so i can say let age and then i give it a type of number and i can assign something to it immediately so i can say like 51 and later down the line i can say age and then i can set it equal to let's say 21. now if i go down and say age and i try to assign a boolean to it so let's say true then it's going to give me an error because i define it to be a number so we can't do this so the rule is the same whatever type we give our variable that's the type is going to be and we can't assign anything else other than something of that type so i can't do this a number here is all numbers so i can put any number here so i can do negative four that works just fine and i can go down here and say let decimal number and then set it equal to let's say 90.85 or something like that and that works fine so it doesn't matter if it's a negative number if it's a decimal number and you can see again it's inferring the type so i didn't add the type i just wanted you to see that types is going to infer that this is a number type because we're assigning a decimal number to it so it doesn't matter if it's a decimal number if it's a negative number we can even do let change let's say you're giving someone a change it's 0.0043 or something like that then that works just fine you can see that it's going to infer that this is a number we could have just say something like this that would work just fine we could have done the same here say this is a number that is fine and we didn't have to assign anything to it like i showed you earlier we just declare it like this and then later down the line we can say decimal number and then let's say 10 points something like that and that works just fine so when you declare a variable as a number type so you give it the number type it can be any number like any number it can be a negative number it can be a decimal number it can be any number that you like and if i try to console log some of this just so you can see it on the screen so i can do console log let's say age and i'm gonna duplicate that by using shift alt and then the uh down arrow key and then here i'm gonna say decimal number and then down here i'm gonna say change and i'm gonna go ahead and run this and you can see that we have all of our numbers and if you want for a positive number let's say for example this change right here let's say this is a positive number i can put a plus sign in front of it and that doesn't change anything because without the sign it's already considered a positive number so if i run this you'll see that we get the same output we only have the negative number here because when we don't have anything by default it's positive it's only negative when we put the minus sign in front of it so for number type it can be any number and you just declare the type the same way so you put your variable and then you put the type and then you can assign something to it immediately like i do here or you can just declare it and then assign something to it later and the only thing you really have to remember is you can assign any number to it like decimal number whole number big small number it doesn't really matter it's just the number type covers all numbers the next thing i want to look at is boolean type so let's say i'm going to define let and is logged in for example and then i'm gonna say this is of type boolean and i'm just gonna declare it like that so if i hover over this of course it's gonna say it's a boolean and because of that i can only assign two values to it because you know if it's a boolean it can only be either true or false so i can go down is logged in and i can set this equal to true and i can say let is admin and let's set this to false just like that and if i hover over this you can see that typescript infers that this is a boolean type and of course we explicitly said that this was a boolean and i can go down and console.log these so we're gonna console.log is logged in also gonna console.log is admin and we're going to go ahead and run this you can see true false so boolean pretty easy pretty straightforward so what we're doing here is going over the primitive type so the primitive types there string and we have number and then we have boolean so those are the primitive types that we have and typescript so we went over a string number now we're going over boolean and boolean is pretty easy you just do the same assignment so when you're defining your variable you want to give it a type you put the column and then you put the word boolean all lowercase of course and then you can either assign true or false to this variable from this point on because you define it to be a boolean type so those are the primitive type that we just looked at so primitive types those are strings number and boolean and boolean is very very easy you just declare the type as boolean and then from this point on you can either assign true to variable or false variable because a boolean type can only have two values either true or false as you can see in this example and that's pretty much everything you have to know about boolean type now when i go ahead and look at arrays so for example i can say let names and then i can say this is an array so i can put open and close bracket and then i can just define it like this and then add things to it later or i can initialize it as an empty array just like that so now it's an empty array and i can go down here and i can say names and then i can push something over to the array i can do push and then let's say i'm gonna push a name on there then i'm gonna say junior now you can see that this is giving me an error because by default timescript assign the type never to it so we have to give this a type so here we can say this is going to be a string array and you can see that at this point it's not complaining anymore because we're pushing a string onto it so if i were to push a number it's going to give me an error because i say it's going to be a string array so let's revert that so this is how you define array so you define the opening and closing a bracket and then you put the actual type of the array in front of the bracket another way you can do this is if i remove all this you can use the word array and then you pass in the type so i can say this is an array of string and then i'll close it like this so that is equivalent to what we had earlier and you can see that it's working just fine so i can go down i can put another name on that so i can go down here and then say alex for example and that would work just fine because that's just another way to define array you can either use the brackets or you can just use the word array and then with the diamond you put the type inside of there and if i go down here and try to console.log this so we're gonna do console.log and we're gonna console.log names go ahead and run this we have our array of string and i can remove this as well show you the other example i can put open and close bracket and you can see that if i run it it's gonna work the same way so you can either do this or use the array keyword but usually see this at least from my experience i've usually seen this format and if you want you can also initialize it so i can go in there i can say you know jr and then put another name in here nelson so that would work just fine as well if i comment these two out and run this and you can see we have junior and nelson so it works the same way you can you know initialize it some value or you can just declare it just like that as an empty array just like that or you don't even have to do that at all you can just declare it just like that without assigning anything to it initially but it's a good idea to initialize it as an empty away because then you can use the push so for example if i uncomment these two lines and then i remove the initialization as an empty array you're going to see that it's going to give me an error because it's not initialized at all you can see the area right here so it's a good idea to initialize it as an empty array and then you can push values to it later so that you don't get an error when you try to do that and you can do the same thing with all the different types so if i go down here and i say let and let's say numbers and then i'm gonna give this a type of number array so i'm gonna do number open and close bracket and then i'm gonna initialize it as an empty array and then i can go down here i can say numbers that push and then i can pass in a number in here and i can do another one let's say i'm passing in eight this time and i can console log it so i'm gonna copy this line go down here paste and i want to console.log numbers and then run you can see we have our numbers here so the same rule applies if i try to pass in a string in here of course it's going to give me an error and you can do the same for a boolean array so i'm going to scroll down a little bit make sure i change this back and i can go down i can say let and it's a boolean array and give it a type of boolean and that's an array and then initialize it as an empty array and i can go down here i can say boolean array that push and then i can pass in true in here so it's going to be the same for all the different types that we've seen so far so string numbers or boolean so it's going to be the same so that means that for this array i can only pass true or false i can't pass anything else to it because i define the type to be a boolean as an array and like i said i usually use this format so i don't use the uh this format so when you use the keyword array and then you put the opening and closing greater than or lesser than sign just like that i don't usually define it like this i usually use the uh this format so i put the type in an output opening and closing bracket but this works fine as far as i know there's no performance issue there's really no difference it'll work just fine you can see if i run this again we get the same result so it's going to come down to your preference as to which one you like better the next type i want to look at is the object type so let's say i have a dog right so i'm defining a dog i can't say this dog is just gonna be a string well you can but i'm just saying i want the dog to be a more complex variable right so i want the dog to have let's say a name and an age and i want to be able to capture this as a type right so that means that we have to define some kind of object because i can just say name or number like that that's not going to work for what we're trying to accomplish so i can come here so after i put the column i can define an object as my type so i can put the opening and closing curly braces and then i can say this dog is going to have a name and that's going to be of type string and they're also going to have an age and that's going to be of type number so this is a type that i'm defining here if you remember the format that we worked on where you define the variable so let and then we define the variable name which is dog and then we put the colon and then we put the type here which is this entire object with two properties a name and an age and if i hover over dog you can see that the type is an object with a name and an age so this is how we define an object type and usually you wouldn't do it that way you would probably define an interface which is something we're going to look at later but i just want to show you that you can define object type in typescript as well so then i can go down and i can say this dog i can set it equal to an object because that's what i wanted in the first place and then i can say the name is going to be say black key and then the age is going to be let's say three and i can put the semicolon here and i can go down and i can console like this dog and then run the code make this a little bigger you can see i have name black key h3 and this is the object so i define this custom type which is an object with two properties so a name and an age and i could also initialize it right up here like we did for the other variable with the primitive types so if i make some more room here i can just delete all this and then set it like this so i can just say this variable that has this type of object so a name and an h for the type of the variable which is an object i assign this object to it which has the same type so we have a name and an edge so if i try to change the name for instance and i say this is the super name for instance now it's going to give me an error because the property names they don't match because here assets going to be a name but here i'm defining a super name so that's not our object that would define right on the left but if i change this to the same name now you can see that it's not complaining anymore because i am confining to the way that i define my object so i'm gonna revert that back and you can see that everything works and you can make this as complex as you want it to be so i can say like uh fave places for example and then i say this is going to be of type uh string array right and i'll define those like this and i can go down here and let's just say we're just going to declare it for now and then here we're going to say set the dog to equal and we're going to pass in the 5th place and that's going to be an array of strings so let's say this is like the name of the parks where the dog likes to go park one and then we can do like part two or something like that and you can see that everything works fine and if i go ahead and run this and expand this a little bit you can see that we have our object so we have the name the age and the favorite place or favorite places would be better here and we can see that everything works fine like i said before you wouldn't usually do this you would actually define something called an interface or a class and then you give the dog this type but just as an example i just wanted to show you that you can actually define object type you just use the same format so you declare the variable so let dog and then you put the column and then you put opening and closing curly braces and then you define your properties and the type that this property has to accept and that's how you can create object type so you use the curl braces and then you define the properties and their type and then whenever you're doing the assignment you put the actual values as you can see here i'm saying you know the name is black key the age is three and the favorite places on the real string which we define up here so the next type i want to look at is the any type so i'm gonna go ahead and clear the output here and here i'm gonna say let let's say stuff and i'm gonna give this a type of any and i'm just gonna declare it just like that so when you use the any type which i highly encourage you not to use you're technically saying this stuff can be anything so i can go down here and then i can say stuff and then set this equal to a string which is my name in this case and that works just fine i can go down a little bit more and i can say stuff and then i can set this equal to a number works just fine i can go down here even more i say stuff set this equal to a boolean works just fine i can go down here and say stuff again set this equal to an object with whatever i want let's say name and give it a a name here and then i can say like i don't know hob is and i can say this is an array of string and i have to fix this i can pass in whatever i want here and it will work just fine right so let me collapse this a little bit over so you can see that when you define something as any you're technically going back to javascript world because you can assign pretty much anything that you want to a variable whose type is any so there are some rare cases or some special cases where you would want to do that when you're writing your code but i highly encourage you to try to find a way to use an actual type either a primitive type or a custom type or an interface or a class instead of using the word any but i do recognize that there are some special cases where you have to actually use any because you don't know what kind of data you're getting so for instance if you're calling some api and the data keeps changing you want to make sure you're prepared and your code doesn't break then that could be a situation where you would use any because you don't know what kind of data that you're getting and to take this a step further i can even go down and say stuff and then say now it's just an array of number and i can do two five six and you can see that it's not complaining i don't get any errors and i can even console like that so i'm gonna console that log and then i'm gonna do stuff and we're expecting stuff to have the values in the array because that's the last assignment because the code is going to run from top to bottom so if we go ahead and run this you can see that we get two five six and if i comment this out and go ahead and run the code again as you can see now we get the object and everything is working fine it's like we have really no problem so that's what you get when you define something as any you pretty much go back to javascript world where you can assign pretty much anything that you want to this variable and like i said you probably don't want to use this so this is definitely not going to be everywhere in your code it's only sometimes when you have some very special cases when you don't know what kind of data you're getting then you're going to use any because you don't want your code to break if you're gonna give it a type and the type that you get is not of that type that you define so highly recommend not to use this unless it's a very special case otherwise just use an actual type either a primitive type or an object type or an interface or a class which we're going to look at a little bit later in the course but that's the any type you can pretty much assign anything to the variable and typescript is not going to complain the next type that i want to look at is union type so for instance i can have a variable so let's say user id for instance and i can give it a type of number and that can also be a string so i'm going to put a pipe and then a passing string so that is my variable i give it a union type and to do this you use two different types and then you put a pipe in the middle and you can keep doing this so you can say it can also be a boolean and that will be just fine and i can also say this can actually be an object with a name of type string that would work as well you probably don't want to go crazy with this like you have like five or six different types in this case you would probably create some kind of a class or an interface which i said we're gonna look at later but you can actually have two three i'd say max three and if you have to go for a fourth type and i would say just find a different way to do what you're trying to do but you can keep going and going and going and i don't know when it's going to stop you so you can go ahead and try this yourself you can keep going and going and going with the pipe and then keep adding different types and see what's going to happen so here i'm just going to go with string or a number so that makes sense for an id and that's just the declaration so i'm just gonna declare this variable it can be a number it can be a string and that is a union type and we do this by using two different types and then we use the pipe to separate the two different types so that means now i can go down here and i can say user id set it equal to 90 and that would work just fine and then later i can say the user id now is let's say some string and let's say it's going to be 88 and that doesn't have to be a number so i can put some let's say the id some random string of character and that works just fine because it's a union type it can either be a number or a string and we can put this before so i just want you to understand that it's not necessary that we have this in order like because we have the number first we actually have to put the number here because you see that this means or either be this one or this other one the order here doesn't matter so i can go down here and paste this you can see that everything works fine and if you want to console log this of course this is going to give us the value that was uh last assigned to the variable in this case 90 make this a little bigger and run you can see we have 90. so that is union type i usually just have two of them i don't go really crazy so let's go down and let's say let customers and let's just say that this is an array of number or an array of string we can do that by just doing the same thing so i'm gonna go ahead and copy this and then just pass in the opening and closing bracket and let's say we're gonna initialize this with an empty array now when you do it like this only this is gonna be assigned to the type of the variable so when i define it like this if i go down and do customer and try to push a number onto that and let's say i push 88 you're gonna see that it's giving me an error so what you have to do in situations like this for instance when you have an array is to use opening and closing parenthesis so you're gonna do something like this so that you enclose the type like this and then you put your bracket so make sure you remember to use these opening and closing parenthesis so that you can define your array type otherwise it's going to assume that this last piece that's the closest to the opening and closing bracket is the actual type and that's why we were getting this error earlier so make sure you remember to do that to add the parentheses before you put your opening and closing bracket so now i can duplicate this line and instead of 88 i can pass in a name here you can say my name for example and you can see that it doesn't complain and if we try to lock this out so i'm going to copy this line paste it down copy customers and paste it in here and then run this you can see now we have an array with a number and a string inside of it so union types they're very handy i use them all the time so i usually don't go above two or three different types max if i'm trying to solve a problem uh usually two i would say if you have to do like three four or five different types for a union type then i would probably try to find a different approach to solve the problem that i'm trying to solve but union type very nd you use two different types and then you separate them with a pipe the next type that i want to look at is type aliases and this is very useful mostly in development and it's very good for readability so let me show you an example so when you're trying to find a type alias you type the word type and then let's say i'm defining an id so i'm gonna do id and usually you do that in uppercase if it's a simple word like this so here i can say this type can be a number i can leave it like that and that would work just fine and then i can go down here and then i can say let customer id for example and then i say this is of type id and that's my a variable declaration so now you can see that this is not really doing anything i could have just put the type number here and not id but what it gives me as a developer is an explicit name that you can see here which is an id so it's good for readability and code understanding in the development process or i can just say this can also be a string so you can see that this id now it's very useful i can over over it it's going to give me the type alias definition as you can see here but now i can look at this piece of code and i can understand that okay the customer id is some kind of id and then we can go down below and then we will say customer id of course and that can be a string or number so i can say 99 for example and i can go down i can do customer id again and then set it equal to a string let's say some character with a number or something that's the user id now and that works just fine and we can also do a more complex example so let's do type and let's say this is going to be a rectangle type so we're going to say rectangle and that's going to be an object so we're going to do equal and then opening and closing curly braces and let's say this as a length property and this is going to be your number and i don't want to do with because that's going to give you another number so let's say the rectangle has a name so we're going to do name and that's going to be a string so this is the type that i define and then i can say let my room for example which is a rectangle type so i can do rectangle and you can see that that works just fine so you can see how useful this can be mostly in development you're very explicit with what you're doing with the code and what you're trying to define so later down i can say my room and then set it equal to an object and there's gonna be a length property let's say 88 and then a name i don't know i don't give my room a name uh let's say room name for just for the sake of it so room name so you can see that this works just fine because we defined this alias as an object with two properties the length and the name and you can see that we define it as a type alias that we assign to this variable my room which is a rectangle so the point is doing it that way is a lot better than doing it this way that we did with the object type so that works just fine we don't get any errors and everything would work fine if i console log the room you will see that it's going to be just an object with two properties and i can show you that real quick so i can do console.log and then my room go ahead and run the code and you can see we have the object printed but it's a lot better when we do it this way because now we're not looking at an object with you know two properties we're actually looking at an actual name that as humans we can recognize and that's just an example of a situation where you would use a type alias that you see that i define up here so you do the keyword type and then you give the name of the alias and then you define the type that you want that can either be a primitive type as you can see we're doing above can be a union of primitive type or a union of primitive and an object type it can be any type whatever you define and then you can use it in your variable like this and you can see that this line here on line 11 that makes a lot more sense than doing something like an object type like i just showed you like if i were to do it this way so i'm gonna revert that back so i hope by now you see the advantage of using the type alias in your code but to be honest i usually use an interface instead of a type alias because in my project i would have different files and things like that so i'm not going to be defining a type up above my files like this i'll probably define some interface and i will try to combine data that belongs together together so instead of having this you know rectangle here i'll probably have an interface and probably have more properties than just these two properties but it exists in typescript if you can find a good use for it then go ahead and use it but in my experience i usually don't use the type alias i use an interface instead now i want to take a look at two poles so two poles they're like arrays but the only difference is they're a fixed size array so you have an array and you can only accept a certain amount of element so for example i can say i'm gonna define country right so i'm gonna say country and then i'm gonna say this is gonna be a tuple so i'm gonna put opening and closing bracket and then i want to have a name for the country and that's gonna be a string and then i wanna have an area and that's gonna be a number so this is how i define my tuple right so you can see that i'm using the same array syntax but in a slightly different way so i can also initialize this up here or i can go down and then i can say country the country name is going to be usa for example and you can see that if i leave it like that it's giving me an error and then i say let's say this country i don't know 500 or something and you can see that now i don't have this error anymore because i'm following the structure that i define up here and if i try to make this a string for example you're going to see that's going to give me an error because it's expecting a number in that location and i can't swipe those either so i can't put the 500 first so i can put the number first and then put the string you can see that it's giving me an error so i'm gonna revert that and it doesn't have to be two different data types it can be any data type so i can go down here and i say let let's say city and then i'm going to give it a type so let's say we have a population for example and that's going to be a number and then let's say area again that's also going to be a number and then let's say name that's going to be your string and that's a valid tuple definition or declaration right there and this is giving me an error because i have this variable defined in one of the files that we have there and you can see that it's inside of this file so i'm gonna say modern city for example so i'm just defining some random name here so now i can go down and i can say modern city and then i can set it equal to uh some value here and i'm going to say 8 and then let's say i don't know 12 and then give it a name of say new york so this is just a dumb example obviously those numbers are nowhere near the actual numbers but you can see that i can have different data types in there but the only difference is i have a fixed number of elements of a certain type that i can only pass in this array right here so i can go down here and then i can console log this same what this is misspell modern change that up here as well and change it up here as well so let's go ahead and run this and click on run you can see that we have the array printed out so topples are pretty much arrayed but of a fixed length and as you can see here for the modern city that i defined i can only have three values added inside of the array at any given time and again you can't swap those either the next type that i want to look at is enum so if you come from a programming background maybe you've heard of enum and some other languages like python or java and they work the same way they're pretty much label that you can use instead of using some number or something like that i'm going to show you an example real quick so to define an enum you type the keyword enum and then you give it a name starting with an uppercase so let's say i'm defining some role and then opening and closing curly braces and then in there i can have something like let's say role underscore user and then i can have role underscore admin for example and then i can have role let's say sysadmin so now i can go down let's say i'm defining a user so i can see let user and then i'm gonna give it a type so i'm gonna put colon and then i'm gonna put opening and closing curly braces and let's say the user is gonna have a name that's gonna be a string and the user is gonna have a role that's gonna be of type rule so i can just do that so now i can go down and say the user now is gonna equal an object because it's an object and i can say the name is going to be a string so i can just pass in my name here and then for the role so i'm going to say roll now we can access the world enum that will define so i can say access my role enum and then i can access one of the enum definition that i have inside of this enum class so let's say i am an admin so i can select role admin now if i go ahead and log this out so i'm gonna do console.log and then log out the user what's gonna happen is we're gonna have an object the name is gonna be junior and the role is not going to be role admin that's because by default when you define an enum like this in typescript there is an index that is assigned to each of your enum and by default it's gonna give the first one the index of zero and then the next one index of one and so on and so forth so if i go down and run this you should see junior and then one you can see it here and that can be very useful if you have an application and then you say you know role one is going to be role admin world 0 is going to be roll user and then rule 2 is going to be roll cis admin so instead of using numbers you're using actual names that you know as developer as humans we can actually read and understand and another thing you can do is you can change the index so for instance i can go to the first one and i can give it an index of five so because i do that then the next one is going to have index of six and then the next one after that it's going to have an index of seven and so on and so forth if i had more uh enum definition after this three so if i go ahead and run this now you're gonna see that we have six instead of one that we had before and we can even take this a step further and then define these as strings so i can do instead of a number let's say i want to say this is user and then i can go down and then i can say this is say admin and then say this is the sysadmin and that would work just fine now instead of giving us a number it's going to give us the string that we define here so if i go ahead and run this you can see now we get the string admin and we can mix and match as well so i can say for the role user it's going to be a string of user and then for the role admin let's say i put in some random number like seven so if i run this now you can see that my role is now seven so in them are very very useful i use them a lot when i'm trying to you know pass in the roles of users from the back into the front end and i also use them a lot when i'm trying to manage the state of my application so i can have like an enum so let's let me give you a quick example i go down here and then i say this is my state so i would define something like app state just like that i'm gonna remove all this and then i can have something like loading underscore state and i'm gonna duplicate this two times and i can say here is going to be the loaded state and you can have something like ready state just like that so i would have something like this and i can you know set them equal to a number or set them equal to a string and then i can use this to manage the application state when i'm working on the front end so when my data is loading then i'm in the loading state when the data is loaded then i'm in the loaded state and when the data is ready to be shown to the user then you know i'm in the red state so they're very very useful and i really use them a lot every time i'm building an application trying to design the application i'm like okay for the front end for this specific part i think i'm gonna use an enum so they're they're very useful and they're used a lot in application development both on the back end in the front end so i'm gonna go ahead and change this to admin uh i want this well you would also have this in upper case by the way so let's do this let's put everything in uppercase i mean you can have them in lowercase too i don't think there is like a convention for them to be uppercase or lowercase but it can be anything you want now if i run this one more time you can see that now my role is admin so this is a lot better and it's a lot cleaner instead of using like a string like this like you know would use some string like this because when you use the enum then you make sure that it's only going to be one of your defined enum in your enum class so if someone else is working the application they can't make a mistake instead of passing a string that was like role admin and then they put an extra s here or something like that because you type this as this enum so the values that this user can have will be one of the enum that you define in your class so it makes it a lot cleaner and a lot better when you're developing application the next type that i want to look at is the type never so for example i can have something like my fruit for example and then i give it a type of never right you can see that it's coming up because it's an actual type from typescript and the type never just means that there's a value that's never gonna occur in the future so i can't go down here and say my fruit for example i can't set it to absolutely anything so if i try to set it to true you can see that it's giving me an error say hey boolean can't be assigned to type never and if i try to use the string same problem you can see here can't assign string to never and it's not going to work with anything really passing the number here it's not going to work so i haven't really had any use for the never type and defining variable i've used it when i'm defining some functions so i can show you an example in a function so let's say uh we have a function right let's say the function is gonna be doing some tasks uh let's say always uh processing something so that's the name of the function and then i can have it return the type never so i can come here and i can say never it makes more sense in a function than in a variable at least from my experience so then i can come in here and say now i can do a while loop so i can do while true so that's like an infinite loop and then i can say do something so i can come in here i can say console.log and then let's say i'm processing or i am processing since it's a computer so something like this would work so you can see that if i hover over this function the type of it is never so i'm not going to call the function because it's going to keep doing this until my computer crashes so i don't want to run it so make sure you don't you don't run this i'm just showing you an example another place i use it a lot actually is when i'm throwing an exception so if you're throwing an exception so i can have another function so that's a function throw an exception for example and you can give the function parameter it doesn't really matter i'm just giving you a quick example and then i give it a type of never and then here i can say just throw a new error for example so i can say new and then i use the error in javascript and then i can pass in a message so i can make this take a message actually so i can go here and then do message which is gonna be a string and then we can you know throw the message there so something like this would work and you can see that it makes sense because there's never gonna be a value that's gonna be produced from this function that's why the type of never makes sense in this situation because it's just going to throw an error it's never going to return a value which is the same case for this because it's going to be stuck in this while loop and it's never going to return anything ever forever so you can see that it makes more sense when you use it in a function instead of using it in some variable like this but you can use it you know in variables or in any different types of variable that you're defining you can define a type of never on any regular string or an object or anything like that but in my experience i haven't really used it in this way like just define a variable like this but in function i've used it quite a lot you know when i'm throwing exception or that doesn't look like something that i would be doing but you can do something like this in some situation but mostly in throwing errors then you know the return type of the function is never because the function is never going to return anything and i can go down and then call the function so i can say throw an exception and then i pass it a message so i can say exception occurred and then run the program and you'll see that it will throw an exception you can see error which is this area that we're throwing and then exception occurred and you can see that it's on line 10 which is exactly the line in the file so like i said i've used the never type but mostly in function as you can see here but never really when i'm defining like a variable like this but i'm sure there are like cases where you use it just like that but i've used it mostly in function like this there is another type in typescript called type unknown and it's a little bit different from type any they're very close but you have a little bit more restriction with type unknown so let me quickly show you an example so let's say i have a variable so i'm gonna say customer input for example and i have no idea what i'm gonna get as the customer input it could be a string it could be an object it could be an array it could be anything so at this point i'm gonna say all right then the type is unknown so i'm gonna have it like this and with type unknown i can come down later and say well for the customer input i'm going to set it equal to let's say 10 and you can see that i get no errors and if i hover over this you can see now it's still unknown if i go ahead and print it out it's going to be 10 because it's unknown so i can assign a number to it and then i can go down i can say customer input again this is another input all right from the customer so you can see that i have no errors and if i come down here and console log all this so you can see it and go ahead and run the code you can see that i have the latest value which is the string and if i comment that out and run it again you can see now i have 10. so that's working as expected so now i'm going to go ahead and define another variable so let's say let customer age for example and i'm going to say that this is a string just as an example so let me come up here and let me change this to let's say age value right so the age value let's say i'm gonna delete this so that i don't confuse you well actually i'm gonna comment it out so the age value as you can see here that i'm setting is a string right it's still type unknown if i hover over this you can see it right here but there's a string that is assigned to it at this point here on line five so you would think that i should be able to come down here and say customer age right and then assign it to the customer input so if i do customer input you're gonna see that this is gonna give us an error and this is a typical typing error because we're assigning two different types so when you have a situation like this the way to solve it is to either do a type assertion or you do a control flow based narrowing and i'm going to show you an example of each one of those so here i can say get this as a string and you can see now it's not complaining anymore and this right here it's called type assertion so i'm just asserting that okay this is unknown but at this point i know it's going to be a string so typescript is going to go in the back do its magic and then convert this somehow to a string and then assign it to this if you can so this is type assertion so you can see that even with the unknown you have a little bit of a restriction so if i do this you see it doesn't work i put this back now you see that it works and another way you can accomplish the same thing is by using a control flow so i can go ahead and comment this out and then go down i can say and that is just an example if the type of so i can do typeof and customer input and i can check to see if it's a string i can do string here and i can say if this is the case then i can do this assignment so i'm going to copy this and then paste it here and i don't need to put this and now you can see that it's not complaining anymore but if i go ahead and remove the statement or the control flow like i'm doing here you can see that we're back to the same error which is you can't assign something of type unknown to something of type string so let's go ahead and revert this back so with the unknown type anything is assignable to it as i was doing here so i can come here and say hey this is 10 and i can duplicate this line and then say this is now gonna be an object so i can do an object with let's say an h property and i can assign let's say eight and you can see that it doesn't complain so you can change this to any here and you can see that we have no errors but any is really kind of bad in quotes because when you use any the typescript compiler just completely gives up on type checking and everything you have a little bit of restriction as you can see in the example that i showed you earlier you can still assign anything to it but if you try to define a variable and then you give it a type and then try to set this variable to whatever you have in your unknown type then it's going to require you to do a type assertion which is what we're doing on line 13. if i uncomment this real quick you can see that it's not complaining anymore so we use as and then whatever type you want to parse this to or convert these two or use an if statement with a control flow here or any other type of control flow that would make sense for the typescript compiler which we're doing here so we're saying okay if the customer input right here which is the unknown type if it's a string then all right assign it to age because age is an actual string so typescript is smart enough to understand that we're doing this checking and then it stops complaining about us you know assigning the unknown to the string because we're checking to make sure that it's an actual string before we do the assignment or we can do a type assertion as you can see here on line 13. another type we have to look at is the literal type now this type is a little bit interesting and i think the best way to make you understand it is to just show you an example so let's say i have a variable so i'm going to call it user type for example and then i'm going to give it a type now this time i'm not going to use an existing type like string or number or anything like that i'm just going to define the type that i want as an actual value so here i'm going to put user and i'm just going to put it in an uppercase you don't have to put in uppercase but i just want to show you the example so the type of user type let's say it can be user or it can be admin so this is the type that we have if i put my mouse on it you're gonna see that it's gonna say the type is user which is a string the string user all uppercase or the string admin all uppercase and this is the actual type of the variable now what that means is that i can only assign these two values to this variable and nothing else so let's say i go down and then i say user type and then i try to set it equal to a string and you can already see that it's giving me the two possible values that this string can have because that's the type it's defined as as the literal type and for example if i put user in lower case you're gonna see that it's giving me an error if i put someone's name for example it's gonna give me an error the only two possible values that this variable can have is user and admin as you can see here when i hit control space i can see that those are the two possible values so let's say i'm going to choose user now you can see that the error goes away and of course i can change that to admin so i can do admin and you see that the error goes away as well and this can be very very useful when you really want to be very strict about the possible values that can be passed to a variable or to a function or something like that and i can also show you a quick example let's say down here i have a function let's say this is the save user function so this function let's say we're going to have it take a user id and this is going to be let's say a number and then we're going to have it take a type and then let's say this type can either be user or admin i'm just gonna go ahead and copy this up here and then place it down and let's say this function is returning void so i'm gonna put void and then open and close and here i can have a condition i can say if the type and then i can check to see if it equals either user or admin and then i can take a different logic and you can see that once i put the quotations it's giving me the two possible values that this can have so let's say if it's user then i'm gonna do some logic here otherwise i'm gonna do some different logic so you can see that this can be really really useful so let's console that log and let's say tempered literal and i'm gonna say saving new admin and let's put this on a new line so i'm gonna do a new line here and then let's pass in the values that we got so let's say dollar sign opening and close curly braces and then user id and then let's also do the the type just so that we can see it and i'm going to do something similar so i'm going to duplicate this line and i'm going to press alt and then the up arrow key just to move this up and clean this space put the semicolon and now you can see that we can have something like this we can have a setup like this and that would work just fine and then i can go down and then save user and then let's say i'm gonna pass 10 and then i'm gonna put opening and close and you can see that it's giving me the options that i can pass i'm gonna choose user then duplicate this again and then this time i'm gonna pass admin and let's say i don't know this is uh 50 for example and also i have to fix this so this is going to be user and lowercase so if it's user then we're going to say saving new user if otherwise it's going to be admin here so or something that's not user then it's going to fall into this else statement so let's go ahead and run this code and you can see that saving user 10 and then here's the user saving admin 50 and an admin and we can also do this with type aliases as well so if i go down here and i say type and let's say i'm defining some variable i'm going to do binary and all caps and then set it equal to let's say 0 or a one so let's say this is the type definitions so now i can go down and then let's say let oops let client id for example and then i give it a type of binary so now if i go down and then try to assign something to the client id you can see that i can only pass in two values and i'm going to do ctrl space you can see that it's telling me that i can pass 0 or 1. if i pass anything else let's say i pass three for example it's going to give me an error i pass five another error a pass ten another error i can only pass either one as you can see here the error is gone or i can pass in zero so you can also do it with type aliases as well so literal type is very very useful and it's really just defining the type and the form of a value so you say this type or this kind of variable can only be assigned these values and usually you see it with an or statement like you wouldn't see something like this like like this because it has to make sense so you wouldn't have something like this otherwise you could just define this as a user so you'd have something like this you know with some or you can have like three or four or five and then you can only assign those exact values to the variable whose type is the type that you define up here so literal type very very useful and i use them when i'm coding and they're very very extremely useful make your code really really clean so we've looked at many different types and typescript there's a couple more that i'm going to be looking at a little bit later in the course but at this point i want to dive into functions so functions are pretty much the same way that they are in javascript with a few additions that you get from typescript so for example if i want to define a function so let's say i'm gonna define a function that's gonna add two numbers i'm gonna say add and i'm gonna say a and b so those are gonna be numbers and then i'm gonna just add them together so we're gonna have the return statement here and then i'm gonna say a plus b and that's our function and you can already see that i'm getting an error from typescript because the parameters in the function they have type any so what we need to do is to pass in the type of the parameters so for example i'm going to say this is going to be a number and the b is also going to be a number so i'm going to say number and just to test this so if we do console.log and then we pass in add and let's say we pass in five and then nine and then we're gonna go ahead and run that you can see that we get 14. so functions are pretty much the same way that they are in javascript with a few features that are added by typescript such as type and also functions now have return types so for example if i hover over the ad you can see that the return type is a number so typescript was able to infer that by looking at what i'm returning here so for example if i'm returning like a simple string here for example now if i put my mouse over it you can see that it infers that this function returns a string and you can also explicitly say what the function is returning for example i can say this function is going to return a number so now if i try to return a string for example then it's going to give me an error because the types don't match because this function is now returning a number but at the bottom at the return statement i'm returning a string and you can also define arrow functions so let's say i'm going to define multiply and let's say we're gonna accept two parameters so i'm gonna say a which is also gonna be a number and then b also gonna be a number and let's say this is gonna be a multiply by b so you can have a statement like this as well and if we try to log this out and let's just call multiply and go ahead and run this you can see that we get the 45 at the bottom so you can have arrow function and you can also have regular function with the function keyword and that would work just fine and one thing to notice about this multiply function is the way that i'm returning these values or this statement so if i hover over it you can see that it's returning a number but really i could do something like this i can come here and i say okay this is going to return a number and then instead of doing this which is a more elegant way you can do this when you have only one statement i can do open and close curly braces and then i can say return and then pass it in here so this is really the long version of what we just did but just so you get the picture i just wanted to you know give you the long version of this so you can understand what this is doing so if i hover on it again you can see that it's still returning a number and now it looks more like a regular function that you know but when you have it this way it's just a little bit more elegant when you have it just like that but you can only do that when you have a statement like this if you're going to have multiple lines inside of the function then you can't really use this notation if it's gonna be one line or one statement that you can have on one line then you can just have it like this and it would work just fine and if you wanna explicitly specify the type then you can come here and you just say okay this is gonna return a number and that works just fine another thing you can do with function is you can give them default parameters or optional parameters so let's say for example i have a function and let's call it format name for example right and we're gonna take a first name and that's gonna be a string and then the last name and that's also gonna be a string and let me make some more room so this is gonna return a string so i'm gonna say string open and close curly braces and close this a little more so we have this function that we call format name it takes a first name and it also takes a last name and it returns a string so it's going to format the name and then return it so we can say something like return and then we can do first name and then a space and then last name so we can format the name like this and then we return it as a string now if i want to call this function so let's say format name i have to give it both parameters so i have to say okay so this is the first name and then this is the last name so let's say for example smith right so we're going to call the function like this and let's also go ahead and console.log that as well so we can see something in the console and i'm gonna go ahead and run it now you can see that we have the name right so the name is returned from the function but another thing we can do is we can make this last name for example optional and the way we do this is just passing a question mark after the name so we're gonna put the name and then before we put the type we put a question mark and that makes this parameter optional which means i don't have to pass this parameter and typescript is not going to complain so now if i remove the last name for example so if i remove smith you can see that the function is not complaining everything still works and i can go ahead and run it again then we get undefined for the last name because we didn't pass the last name so this is optional parameter and of course you would probably have a logic inside of this function where you check to see if you get up this parameter if you didn't then you can us you know format the name a different name so that you don't have anything like you know undefined in your return statement like this but i'm just showing you an example so another thing we can do is uh we can have default parameters so we can come down here and let's say now we're gonna say let's name this two right so format name two and i see that this is going off the screen so i'm going to remove the return statement because types is going to infer it anyway so you can see that typescript inferring that this is returning a string so what we can do here is instead of making this optional we can actually give it a default so we can set it to some string for example so we can say unknown right so let's say we're gonna say the last name is unknown if they didn't pass the last name now i'm gonna go ahead and call this function down there so if i call this function with just junior and this is supposed to be format name two so we're gonna console.log whatever this is gonna return so what it's gonna return is it's gonna pass in the first name because it gets the first name because we pass in the first name and then for the last name it's gonna see that we didn't pass a last name or the second parameter so it's going to use this default oops which is unknown right so it's going to be unknown so let's go ahead and run this and you can see that we have junior unknown but if we actually pass in a last name right so let's say smith and then run it again you're gonna see that it replaces the unknown with the actual parameter that we passed now one thing you have to know about this is that your default parameter it has to come last it cannot come before any other parameter and the list of parameters in the function so you can't put it in the beginning here so if i try to do that i can show you an example if i set this equal to some string and let me make some more room and now i'm gonna say okay this is gonna be of type string right so let's say i want this to be passed in and let me make sure i spell this right and you can see that we still don't have any errors right because we're passing in the two values that this function uh is somewhat expecting right so if i run it now it's gonna be junior smith right because that's what we're passing in and you can see it down there but for example if i say all right well i don't know what the first parameter is because i'm giving you a default but i want to pass in the second one so i'm gonna say okay i'm not passing in the first one so if i remove this you can see that we get an error you can see if i hover over it it's going to be confused because it doesn't know for which argument we're passing in this value so that's why you have to make your default parameter it comes last because then the program is going to be confused you can see here it doesn't understand that we're passing this in for the last one so that's one thing you have to keep in mind but for optional you can pass in optional for the first or the second or the third it doesn't really matter with optional but with the default it has to be the last one so i'm gonna ctrl z so that i can undo all of that all right so now it's not complaining anymore and i can go ahead and pass in one parameter here and it's just going to print undefined for whatever i didn't pass if i didn't set it for anything or it's just gonna pass in the default in this case it's unknown and you can see it right here there's also another concept of rest parameters so let me quickly show you an example so i'm gonna scroll down and i'm gonna say i'm gonna create another function so let's say function and i'm going to call it print names for example right and i'm going to say it's going to take a first name and that's going to be a string and then i want to take everything else that the user passed to me so i can just spread them and then pass it in as a parameter and typescript call this rest parameters so i can do that dot and then i can do all the rest right and then let's just say this is gonna be an array of string so i can do string array and then we're gonna say this is gonna return uh we're gonna return the first name so we're gonna say first name and then we're gonna add in all the other names all the rest and then we can just use any of the methods that you can use with array as long as it's going to return a string so for example i can just join everything and then uh let's just passing in a space here so i'm going to say space so we're going to take everything else we then space them out and then we're going to return them as a long string so now what i can do is i can go down there and then i can say console.log and then let's say i'm going to call print names and then i'm going to say all right so my first name is junior right and let's say my middle name is uh let's say john and let's say i also have my mom's name or family name i don't know uh smith and i can keep going because this is an array so i can say i don't know joseph right and all of this i'm passing in to the same function because this takes an array for all the rest of the parameters which is why this is called rest parameters and i can keep going and going and going so now if i go ahead and run this and move this over here you can see that now we have junior john smith joseph so it takes everything else join them by space and we can also put a space in between these two so afford to do this i can just come here and then add another plus sign here and then head another space in here so this is going to be the first name space and then all the rest which we're joining and then we're passing in a space in between each element in this array and i can keep adding i can add one more here so i can say raymond right and that will work as well so make sure you guys can see all of this okay so we're calling the same function and we're passing in a number of parameters to it and we can keep going so let's go ahead and run it again and you can see that we get this long string printed out and we have absolutely no problem so this is called rest parameters one last thing i want to teach you about function is function overloading now if you're coming from a java background you're probably familiar with this term already because it's used in java so function overloading in java at least is having a function with the same name in the same file but then the parameters are different and we have something similar in typescript so say i have a function and i'm going to call it add values right so let's say it's going to take two values so uh val and that's a number and it's going to take another one about two so let's call this va one and val2 is also gonna be a number and we want to say this is gonna return a number right so we're gonna define it like this and then i can have another function so function and i'm gonna call it f values again and it's gonna take two values so let's say val one and this time this is gonna be a string and it's also gonna take a val2 and this time it's gonna be another string right so we're gonna take two string and this is actually gonna return the string so we can have the functions defined like this and then what we can do is we can say all right so for this function add values it's gonna take two parameters so let's say a and let's say i'm gonna give this a type of any and then b and give this a type of any and what i can do is i can just say this is gonna return a plus b so i can do that and you can see now i don't have any errors because i have an implementation for these two functions and they're returning different things so if i go down here i say f values and then i pass in five and then i pass in eight for example and let's make sure we can see this so i'm gonna console log that and close and go ahead and duplicate this line in here i'm gonna pass in let's say i'm gonna pass in a name for example so i'm gonna say junior and let's say kevin right and it's supposed to be add values not add all right so now you can see that i don't have any errors and i'm calling two different functions and they're returning two different things so if i go ahead and run this now you're gonna see we got 13 for this edition and then we got the concatenation here as you can see here and we can go ahead and fix this so that we can put a space in here we can add the space inside of here and if i go ahead and run it again now we get a better output so we have 13 and then we have junior kevin so you can see that we can have function overloading and typescript as well so you can have different functions with the same name but different parameter types and return types now let's go ahead and take a look at classes and typescript so whenever you need to create a class in typescript and hopefully you understand the concept of class in object-oriented programming so whenever you're describing a class you start with the keyword class and then you name your class so for example i can have a class named person and then inside of this class let's say this person is going to have a first name for example so i'm going to say first name and then give it a type of string right they're also going to have an age and this is going to be a number and that's where i'm going to capture their age now what we need to do is to describe a constructor so i can say constructor and let's say this is going to take a first name and that's going to be a string and a age and that's also going to be a number and we need to assign those values to the properties that we have on the class so i can say this to refer to the first name and the last name so i'm referring to the class itself by using the disk keyword and i say for whatever first name that i have for the class set it equal to the value that i get in the constructor and i can just do that as well for the age so i can say this to refer to the class itself and access the age and then set it equal to the age that i get and the constructor and i didn't really have to name these the same name so i could have like name for example and i can have something right so let's say something so they don't have to match and i can paste those in here or something is the age and the name is gonna go in here okay so oops and let's paste this here so i just wanna show you that they don't have to have the same name because when we call this constructor is when we're going to create an instance of this class and when you do this you have to pass in two values to that instance one is gonna be a string the second one is gonna be a number and i'm just gonna take these two values that you pass in the instance because when you create the instance you're gonna call the constructor and i'm gonna assign my first name to the string and then my age to the actual or something so i'm just letting you know that they're not related to each other even though they have the same name so let's undo all that all right so we're gonna have our first name and then our age we can also have methods inside of class so for example i can have a method and i'm gonna say let's say print name for example and it's it's not gonna take anything and it's going to return void so that's another type that we haven't looked at yet but i'm going to leave it out for now and let's say this is just going to console that log and i'm going to use backtick and we're just going to say you know your name is and then pass in uh template literal here again to access the property in the class we have to use the disk keyword so again i'm gonna say this that first name and i'm gonna say end your age or you are and then passing the age so this that age and i'm gonna say years old okay so um this is how we access the properties on the class by using the disk keyword so at this point i have my class which is the blueprint for a person right so now let's say i want to create an actual person so let's say cost and this is gonna be junior and i'm gonna be a new person when i'm creating this instance as you can see the constructor is expecting a string and a number so the first name is going to be a string and the age is going to be a number so here i can say well i'm just going to give him my name and then let's say i'm 30 years old so let's say this is my junior person or the instance of this class right here so for example i can do junior dot print name and then i can call the method and this is gonna print my name in my age so if i go ahead and run this you can see that your name is junior and you are 30 years old so i put this on two lines because it wouldn't fit but if i put this on one line and then run it again expand this a little bit you can see that your name is junior and you are 30 years old so this is how you define a simple class in typescript now there is a major problem with this class and let me just quickly show you an example so if i go down here and i say junior so that's the instance of person that we created so an instance of the class and i can actually access the first name so you can see i can access the first name and then i can say hey this is my new name now so i can say new name right and then run the program and that would still work you can see that it says you know your name is your new name or whatever so this is a major problem because we can actually access the properties on the class and usually don't want to do that because this defeats the purpose of encapsulation because you don't want these to be exposed outside of the class you want to have a standardized way to access those objects and expose them or a way to set them and the reason we're having this problem is because right now as we have those properties they're actually public so it's like we have public in front of these two properties on the class right just like that which is why i can access this first name outside of the class you can see this is inside of the class so if i collapse this you can see i'm outside of the class and i can still access this first name so this is a bad design so what we want is to have those as private so i'm gonna put private and then change the one down there as well as private and immediately you can see that i'm getting an error because this is a private field i can't access it outside of the class the way that i'm doing here and sometimes you might want to have one way to set properties on the class for example when we accept the first name on the constructor like this i can say well i want this to be uppercase or something like that so i can do like that to uh upper case or something and i might not want anyone else to be able to set the first name on the person any other way so i need to standardize this so that's why i don't want someone to be able to access this and then change it what i want is every time they're trying to set the first name i want them to go through the constructor the way that we're doing here so you can see now we're getting this error and this is usually how you want to build your class because you don't want the properties on the class to be accessible outside of the class that is just a bad design and it just defeats the purpose of the class in object oriented programming so now if i run the code you will see that the code will still work but the only thing is i can't access those properties in the class outside of the class and when i'm trying to refer to them inside of the class i have to use the disk keyword to refer to the class itself and then the name of the property another thing i want to point out is the properties that we have on this class right here so usually when you have a class you're going to have more than two properties right so you might have like an email you might have some image url you might have some other properties that you want to have in the class and every time we have to do the same thing for the constructor and this is a little bit redundant so another way you can do this uh let me just add another filter here just so i can illustrate it a little bit better so let's say we're gonna have an email here and that's gonna be a string and then we're also gonna have another private image url so let's see that's the image of the user and then we're gonna give this type of string actually let's make this an id so that this can make more sense all right so let's say the id is gonna be uh some kind of number or something so number and let's fix this and i'm gonna change this to name just to keep it simple and see if i can move the id at the top all right so we have an id we have a name we have an age and then we have an email right so we have to do the same thing in the constructor we have to define all these values and then do the assignment for all of them now another way we can do this is by just passing in those values directly inside of the constructor so i can just go ahead and copy all this and then comment them out and then here inside of the constructor as parameters let me see if i can move this over a little bit i can just pass those in so i can see this is going to be the first parameter this is the second parameter and this is the third parameter and this is the fourth parameter then i can get rid of these i don't need them anymore and maybe i'm passing in too many so let's just remove two of them because i want you guys to be able to see this and i want to keep this on one line so let's put this on one line right and let's go ahead and comment this out for now just so we don't get an error so we're gonna create the class right and then we're gonna have the constructor only so we're not gonna define anything else on the class right we're not gonna define any properties here we're gonna do this in the constructor itself and this is just a shorthand way to do this so let's say we're gonna have an id and then a name right so here when i construct a person i'm just gonna say the id is a number so let's say id is five and then the name is junior and we don't need this third parameter and that would work just fine so what types of is going to do is whenever we pass in the modifiers that's the key thing in this you have to pass in a modifier in here either if it's going to be public then you're going to pass it public or private so this is just a way that we can give typescript some special instruction that we're trying to create those properties as well on the class so when we pass in the access modifier as you can see i'm doing here i'm passing in private then those properties are also going to be created in the class so like we're defining up here so if i were to remove those two just to not confuse you so doing this in the constructor like this it's like defining these at the class level and then do the this that id equal the id and the constructor and then this that name and the class equal the name that gets passed in the constructor so now if i go ahead and do console.log and then i take a look at the person which is me and i'm gonna move this over a little bit and go ahead and run this you're gonna see that we have the person object as you can see here so id is five and then the name is junior so this is just a shorthand notation that you can use whenever you're defining your class because this can get really really redundant when you have to type them in the class and then you have to type the same thing inside the constructor as parameters and then you have to set those values in the body of the constructor function so instead of doing all that you can just pass in the values inside of the constructor and that's all you have to do like you don't even have to use the disk keyword like this that id equal you don't have to do none of that and then when you create your instance of that class you just pass in the values that the constructor is expecting and then texture is going to be able to construct the instance for you using the constructor and also created this field on the class itself and that's usually how i define my classes like when i'm working with classes i just go and create the class and then i initiate the constructor and then i pass in the values that i want inside of the class i never actually use this format when i'm defining a class so that's just really a shorthand way to do this that you should definitely know that's probably going to save you some time when you're developing your application another access modifier that we can use beside private and public is the read-only so for example i can have this name inside of this class and i can say this name is gonna be read-only right which means that once this name is set it cannot be changed and i can show you a quick example so if i go ahead and delete this line and i go down here inside of this method and then i say this that name and then i try to set it equal to let's say something else right you can already see that it's giving me an error because i define it as a read-only property and if you really want to you can make all of your properties read-only so whatever work that is being done inside of the class with these properties then these properties cannot be changed the way that they were passed inside of the constructor is the way that they're going to be so if i try to uh you know assign a new name here then it's going to give me an error as you can see it says this is a read-only property and you cannot change it so that's another safety that you can add in your application or in your class so that you make sure that once a property is assigned once then it cannot be assigned again because it's a read-only property and when we assign it is by calling the constructor like this so when we call the constructor we pass in junior to this name and this value is set and now if we try to change it even though we're inside of the class we're using the this keyword we still can't change it because it's a read-only property and you could do the same thing if you are defining those properties at the class level so you would just add the read-only keyword here so you say read only and then you would do it for both of them if you if you wanted to so you define the private and then read only and then the name of the property let me get rid of this all right so that's another access modifier that you can add in your you know in your properties in your class and that's going to add more restriction when dealing with this class and the properties inside of it we also have inheritance in typescript whenever we're working with classes so for example i can have another class so let's say i have another class so i'm going to say class and let's say this is u.s citizen right so this us citizen is going to extend the person class right so we're going to say extends person and this is enough that we have to do we don't even have to do anything else and what's going to happen is the u.s citizen class is going to inherit everything from the person class so for example i can come down here and then i can say cost and say john and this is going to be a new us citizen and then as you can see it's expecting the parameters from the parent class and then here i can pass in an id and then i can pass in a name in this case that's going to be john and if i console.log john so console.log and pass in john and this is supposed to be lowercase and then go ahead and run that you can see that u.s citizen five and then for the id and then the name is john so we're technically inheriting from this constructor as you can see here so that's all we have to do we just have to say extends person and then we can use everything that exists inside of the person class now we can also have our own constructor inside of here so let's say for example we wanted to take a social security number so we would say something like private ssn and let's say this is going to be a string in that case we need to define a constructor so we can see constructor and then we're gonna take the ssn so we're gonna say ssn also string now very important is whenever you extend a class and then you have your own constructor you have to call the super keyword so that's how you invoke the constructor of the parent class so when we call the super keyword we're invoking this constructor inside of the person class because that's the class that we're extending as you can see here and we know that this is expecting an id and a name so let's grab an id and then let's pass in a name so we're gonna say uh john and then we can continue down and then say this that ssn and then pass in the ssn that we got from the constructor and that would work just fine so now what i'm going to do is i'm going to remove all of this and then i'm going to say the ssn is just some number like this so if i go ahead and run this you're going to see that we have the id5 the name of john and then the ssn so now let's say we want to get all of this information when we create the instance from the us citizens right so we don't want to pass something hard-coded here that's pretty much useless you probably would never do this because you don't want to take hard-coded values so what we can do is to do the same thing so in here i can i'm going to say private and i can also do it on the class as well like i can duplicate this line and then i'm going to say you know id like this but we're gonna use the shorthand notation so i'm gonna go ahead and delete these two lines and then inside of the constructor i'm gonna say we're gonna take an id as well so i'm gonna say private id and this is gonna be a number and in private name and that's going to be a string and lastly we're going to take the social security number so i'm going to move this a little bit over actually i'm going to go ahead and close this for now so close and the constructor right i'm taking the id i take the name and then i take a social security number so then when i call the super class because i'm extending the parent class which is person and the person class it takes the id and it takes the name so what i have to do i have to use the super keyword and when i call the super keyword i have to pass in whatever the constructor of the parent class is expecting in this case that's the id and the name so here i'm getting the id here so when i call the super i pass in the id and then i pass in the name instead of hard coding it so here i'm going to say name so this is going to call the constructor of the person class so this class and then passing those values to the constructor so that we can construct our citizen or u.s citizen instance which in this case is going to be john and then now all we have to do is to supply those values to the constructor at this point so that we can have a code that is more dynamic so we can say 10 for the id the name is going to be junior this time and then the social security number is going to be the same and i'm also going to change this to junior and let's make this lowercase and we're getting this error because those cannot be private anymore so i'm going to remove the private keyword and if i go ahead and run this at this point and bring this over a little bit you can see that we have our u.s citizen id10 named junior and the social security number so we are able to call the parent constructor when we were calling the constructor of the u.s citizen so we can construct this instance down here so there's a lot of work that gets done when we call this constructor and passing these values because we have to call the parent constructor by using the super keyword and then we pass in the values that it's expecting in this case that's the id and the name and then we pass in our on well we didn't even have to do this because we're taking it here as a private ssn so if i go ahead and run it again you can see that we get the result all the same so just so you really understand what i'm doing here so let's say we're going to define this at the class level right so i'm going to come up here and then paste this in so this is going to be the private ssn and then i'm going to accept this ssn here and then i'm going to say all right when we call the constructor set that ssn to whatever we got from the constructor just like that so this is the long way of doing this not using the shorthand so if i go ahead and run this again you can see it's working all the same so instead of doing all this we agreed earlier that we could just pass those in inside of the constructor pass all the properties inside of the constructor and then the constructor will take care of creating those properties in at the class or inside of the class so instead of doing this here we can just remove it also remove this assignment because we don't need it and just make this private and that's all we have to do so if i go ahead and run it again we get the same result so always remember if you're gonna use the long way of setting the properties on the class then you have to call the super keyword and then pass those values that the parent constructor needs first and then you can start assigning your values like this ssn etc etc you just have to remember that you have to use the super keyword first in the constructor so the first line inside of your constructor should be you calling the super keyword and then passing the values that the parent constructor is expecting in this case the id and the name and then you do the rest of your assignment or you can just do it the short way which is more elegant you just pass in the access modifier in front of the new properties that you're adding that are now going to be passed inside of the super keyword and then you just create your instance that way and this is a lot cleaner to be honest another access modifier that i want to talk about is the protected so we've seen the public and we've also seen the private so now let's take a look at the protected so when you declare a property as protected in a class any other classes that extend this parent class then will have access to this property right so let's say in the u.s citizen class that is extending the person class i wanted to access this name for example right so let's say i wanted to access it so that i can change the name or something like that and that is just an example and i would come inside of that class i'm going to create another function or method that's going to be called rename and it's going to take a new name so let's say new name and let's say that's going to be a string for now we're going to say all right what we want to do is we want to take the name of the user so the current name of the user so that would be me down there so the name that i currently have by calling the constructor and then passing in the name in here is junior so right now as it stands this object or this instance of the class has the name of junior remember this name is not in the us citizen class right it's coming from the parent class as you can see here the parent class has the name property but since we're extending the parent class it's almost like this u.s citizen class has the name property as well so now what we want to do is to access that name so that name coming from the parent class and then set it to something else because if we want to make any changes to any of the properties in the us citizen class if it's coming either from this class or from the parent class we just need to have a way to access it so just to show you what's going to happen if i try to access the ssn right so i can do this dot ssn and you can see that i can access the ssn because it's inside of this class this u.s citizen class right it's right here you can see it right here so i can access it but the name remember it's coming from this parent class so the parent class which is person so if i try to access the name and i do that name you can see that it's not coming up you can see that it's not coming up at all and it's giving me an error and it says it's a private property i can access it so that's an example where you would want to use the protected access modifier so instead of private here i would say protected so when it's protected then any other classes that extends this class then have access to this name they can use the this keyword to access this name now we won't be able to set this name to anything but you can see that the error is gone and the reason we won't be able to assign this to anything else since we're trying to change that name is because this is read-only so for now let's just get rid of the read-only and then we're gonna say all right so at this point the name is gonna be the new name so we pass in the new name so you can see now even though this name is not part of this class it's coming from the parent class we can still access it because we make it protected which means that any other class that extends this parent class then they have access to this property on the parent class by using the disk keyword which is what we're doing here so now just to show you an example after i create the instance calling the u.s citizen class passing the id to the parent class the name to the parent class and then the ssn to this class the child class so this one that's the class that has the ssn all these two they're going over to the constructor and the parent class so now what i want to do is to just use this instance say i want to change my name so after i print to the console i'm going to call the same instance and then i'm going to call rename and then i'm going to pass in a new name and here i'm going to say this is my new name now right so let's say this is my name and then what i want to do is to just print this out again so that you can see the difference i'm going to go down here and then print it again so if i go ahead and run the code we're going to have the same printout so whatever we already have here and the output which is coming from line 25 but whenever we print it again after we rename this instance or rename me junior then the name is going to be general so let's go ahead and run that and you can see for the first output we get the name as junior but for the second one we get the name as junior row so we were able to access this property from the parent class because we make it protected which means any other class that extends the parent class then they have access to this property and they can change it however they want another thing i didn't mention is the method inside of the parent class so all the functions and methods inside of the parent class you also inherit whenever you extend that class so i'm going to grab this console log down there and then i'm gonna go inside of this print name so let's say we want to print this name in in all caps so i'll come in here and then pass in the log and in here i'm gonna change this to a template literal and then i'm gonna say name and all caps and then pass in the name in all caps so i'm gonna do a dollar sign open and close curly braces and then i'm gonna say this dot name and then call to uppercase again so that's gonna print the name in all caps right because we're calling the two uppercase on a string so now if i go down and i call this method so the method from the parent class as you can see here if i hover over it you can see it says it's a method right here i can still have this printed out because this class the us citizen class which is what my instance is of it's extending the parent class which means i not only inherit all the properties but also all the methods so if i go down and then i call from this instance from the us citizen i call print name uh maybe we should rename that so i'm gonna right click rename symbol print name and cops so that it can make more sense so if i call this method down there so it's gonna log the name it's gonna say name and all cops and then it's gonna print the name in all cops and remember this method or this function it doesn't exist on the us citizen you can see the us citizen class it ends at line 22. so we don't have this print name in caps inside of the us citizen class it's coming from the parent class and i just want to show you that whenever you extend a class you also inherit all of the methods as well so if you go ahead and run that you're going to see name in all caps and then you see the name and all caps so you also inherit all the methods as well so say i wanted to have my own print name and cops instead of the us citizen class so say i wanted to override this method but inside of the us citizen class i can do that as well so if i go ahead and copy this and then put it inside of the u.s citizen class and i can say in u.s citizen class right just so we can differentiate so now even though i'm calling the same method down there instead of calling the same one from the parent class now it's going to call the one from the u.s citizen because we override this method from the parent class so now if i run it again you can see that it says in us citizen class and then we get the same output so you can see how powerful inheritance is when you're using typescript and it's almost like you're using java or python because that's how powerful tai script is when it comes to typing and having very strong object-oriented programming even though it's not really object-oriented programming because all of this code is going to be transpiled into javascript so it's almost like you're working in some back-end application using you know python or java or some strongly typed language now i want to talk about getters and sitters and we're going to take a quick example so that i can illustrate this for you so i'm going to go ahead and copy the u.s citizen class i'm going to scroll down and then paste it down and let's just give this another name so i'm going to call this car and it's not going to extend person this time and it's supposed to be uppercase and we don't need the super keyword because we're not extending anything and let's say the car is gonna have a name well maybe not a name but let's say i'm making a model right so i'm gonna come here and then say we need a make which is a string and also we need a model so i'm going to copy this private as well and make this private and the model okay so that's how we're going to represent our car and we don't need these two methods down there so we have a simple class right which is car so class car you can see right here ends on light 41 and then we have a constructor for that class and then we have two properties on this class the make of the car and the model of the car and these two properties as you can see they're private which means i can access them outside of this class so let's say i wanted to make this accessible so one way i can do this besides making it public of course or making it protected for any class that would extend this car class i can just expose those properties using getters and setters and as an example i can come down here and then i can create a setter hopefully you guys understand the idea of getters and setters but if you don't when you have a getter that means you're trying to get some value from the class and whenever you have a setter that means you're trying to set some value on the class as well so if i want to define a setter i'm going to use the keyword set and let's say i want to set the make so i'm going to say set and then i can give it a name now this is going to be a little weird because it's going to look like a function but in reality it's just going to be another property on the class itself and for example i can say set car name and that's going to look like a function so it's going to be like this and also whenever we're setting a value we need to take that value so let's say this is going to be the car name or we can just say value so whatever the valve is going to be it's going to be a string and then inside of this body we're just going to say this that make well we don't have a name so let's change this to car make so make so this that make and then we set it equal to the new value so we're going to say value so this is a setter remember we can't access this make outside of this class because it's private but we want to be able to give access to it or at least to set the value inside of it besides using the constructor of course because whenever you create a constructor you're gonna have to pass in the make and the model and i can do the same for a getter so i can go down and i can say well this is a private field you can't really access it but i'm gonna give you a way to do that and i'm gonna say get and then i can call it the same car make and this time we're not gonna take any parameters and every time you have a getter so a get with the name you have to always return something so here we're gonna return this that make because that's what we're trying to get the make of the car so if i scroll down and i'm going to make sure you can see the whole class and let's say i'm going to create a new car so i'm going to say const and let's say i'm going to create an acura and i'm going to say equal new and then i call the class constructor so that's going to be car and then i'm going to pass in the make so the mic is going to be acura and also a model so i'm going to pass in the model as well and the model is going to be tl so that's an actual acura model so now if i go down and then i say akira and i try to access the name you can see that it's not giving me the option and i try to access the make you can see that i can't access it so if i put make it will tell you that this is private you can access it outside of the class but i can access it by using the getter and the way that i can do this is just calling car make now you got to remember this looks like a function or a method but it's actually just a property on the class you can see if i hover over it it says property and the same goes for the setter it says a property it's not really a method like if we scroll up now i put my mouse on this you can see it says method so even though this looks the same except for the keyword of course the get and set it's actually a property which means that when we're calling it down there we're not gonna put the opening and closing parentheses so now we can console log that we can show that on the console so i can say console.log and then i can access the car make just like that and i'm going to comment out all these other logs so that we don't see everything so let's go ahead and run that so if i go ahead and run it you can see that we get a cura so even though we weren't able to access the make directly we can access it using a getter as you can see that i'm doing here now i give this the same name so this is probably gonna confuse you so let me see if i can change those name so instead of get car i'm gonna put getter so i'm gonna put a g just so you know this is the getter so this is the getter so we're getting the name which is going to return just the name of the car and i can run it again you can see i get acura so now if i want to set the name well i keep saying name but it's the make so if i want to set the make i can call the setter as you can see here so i can go down with the acura again i can say car make and then set it equal to something so now let's say honda you can see again i'm accessing this with the that operator and then i don't have any opening and closing parenthesis and that's just how i'm going to access it because it's really a property even though it looks like a function so if i copy this line and then go down paste it again because we changed the make now we shouldn't see acura we should see hyundai well i wanted to put honda so if i go ahead and save and run you can see for the first log we get akira for the second one we get honda so this is how you can use getters and setters you really use the set keyword you give it any name that you want for the setter you're always going to take a value so whatever they're going to set the property on the class to and then you're going to use that value and then set it to whatever property that you want to set it to and usually when you use getters and setters you always want to put more logic inside here so here i can have you know more logic in here because that's usually why you would want to use a getter in a setter because you want to um add some more logic to your code for whatever reason that you might have now you might be asking yourself then what's the best way to do this should i expose my properties using getters and setters or should i just make them protected or private or public or whatever the case well the answer to this question is it depends and i've been using typescript for a while and i never really had to use getters and setters i mean there were opportunities for me to use it but i really didn't use it i use the protected and then i only access the property in the class that extends the parent class and i really never found myself uh needing to do this but sometimes when i'm using angular there are certain things that i want to do because when i'm working on very large application the logic becomes really really complex and then i found myself using getters and setters because of some weird things that i need to do but usually personally i don't use getters and setters that much i use protected and then access the priority from any other class that extends the parent class at least from what i've been doing that's what i've been having to do i haven't really had to use getters and setters but just so you know they exist you can actually use getters and setters and then expose your private properties from your class in a safe way like we're doing here another cool thing we can do with classes is defining static properties and static functions or methods so say for example i wanted to have some number on here that i want to access or some value that i want to access from the car class but i don't want to instantiate the class like this you can see that every time we need to access anything on that class we're actually using an instance by using the new keyword we pass the name of the class and then the values that the constructor is expecting then we have an instance of this class and then on that instance that's why we do everything that we need to do you know if we want to access something then we would access it on the instance or if you want to access the methods or function we do that via the instance as well so say for example i have a property that i'm going to call number of uh wheels for example right and i want to set this to for example four so say i want to be able to access this number of wheels which is gonna be four but then i don't wanna instantiate the class like this right and usually you wanna do this when you want to access utility properties or functions or methods so what i can do is i can make the static so i can say static and then i put the name of the property and then i set it equal to some value that i want and another thing you would see is sometimes you can have this an upper case so i can have something like num underscore of underscore wheels and then set this equal let's say six in case they have some pickup truck so for a car we can see the number of wheels is or the max number of wheel so max number of wheels right so that's going to be six and this is static right so now if i come down and from the acura if i try to access this value you can see that i don't have access to it because the acura is an instance of the car class now if i want to access the aesthetic property i have to use the name of the class itself so if i say car which is the class not an instance and then i do that you can see that i have access to the max number of wheels and i can go ahead and print that if i run the code you can see that i got six and we can also do the same four methods so i can go down inside of the car class and then i can say static car stats for example right so let's say we're gonna take uh some numbers so let's say we're gonna take the mile which is gonna be a number so let's do mile and then a number and then what we want to do is to just uh let's say we turn so let's say we're gonna return an object so i'm gonna do open and close curly braces and then i'm gonna say mileage that's the mile and let's put another property so let's say type and let's say a string and we're going to say hybrid for example right i'm just i'm just coming up with something now we have this static car stats where we can pass on a mileage and then it's going to give us some object of some sort right and you can think of something more clever than this so now what i can do is i can just go in down there and then i can just access this directly on the class and then here if i put a dot you can see that i have car stats and then i can pass in let's say 10 for example so if i go ahead and run this you can see that i get the console log here so i get the mileage which is 10 and then i get the type which is hybrid now that's really not a very good example but you can think of something more useful to do in your application now there's a couple of things to keep in mind so for example if i need to access any of the properties on the class that are not static then i can't do that inside of the static methods by using the disk keyword and i can show you this so if i go in here and i see this and then i do dot you can see that i have access to the function itself but then i don't have access to anything else because remember whenever you call this inside of the class itself that this keyword is really creating an instance and then give you access to these properties so if you actually want to access for example this property inside of the method instead of the class itself you actually have to use the class itself so you can say car dot and then you have access to the maxwell you can see it's coming up here so i can access it that way if i want to do something with it so that's one thing to keep in mind so say i just wanna console.log it so i would say console.log and i can pass in the maxwell in here and run this you can see that i got the six again and usually you see developers using these uh static properties and methods for utility reasons so if you wanna keeps track of some you know some number on the class that's never gonna change or something like that then that's a good reason to use the static because you can just use the class name and then the name of the property or the name of the method and then access it that way now one last thing i want to mention about static methods and properties is that you can also use the disk keyword inside of static block to access static properties for example you can see here i'm using the car and then access this number of wheels right but because i'm inside of a static block as you can see here i can actually use the disc keyword so if i do this you can see that i have no problem but if i take the same code right i copy this and for instance inside this setter here i paste it in you can see that i'm getting an error because when i'm not inside of a static block that this keyword is actually referring to an instance of the car class but when i'm inside of a static block then it's referring to the class name itself or just the class and then i can access just the property that aesthetic that i have so this is a little bit tricky but that's just something that i see that i didn't mention before and it's quite important that you understand this so if i'm inside of a block that is not static then i can't access static properties or method because when i'm inside of a block that is not static whenever i call the disk keyword then i'm actually referring to an instance of the class that's what happens under the hood but when i'm inside of aesthetic block as you can see here then when i access the disk keyword then i'm actually referring to the class name itself or the class and not an instance of the class so just make sure you keep that in mind if i want to define an abstract class and like i said before in the beginning of the series you have to be more or less familiar with object-oriented programming because if you do then you already know about an abstract classes but if you want a very high level overview whenever you have an abstract class then you need other class to extend that class and you don't want anyone to be able to create an instance of this class itself and a very popular example is to use the animal abstract class so let's just take a quick example so i can have abstract class and let's just say animal open and close curly braces and inside this class i can actually have fields i can have constructor i can have anything that i want and i'm going to give you guys a simple example so let's say um we want to define a function or a method that will determine what sound that this animal would make right so we can say like print sound for example and that's really just a dummy example and it's going to take a sound that's going to be uh that should be a number and since this is an abstract class we're just gonna put the blueprint of this we're gonna say it's gonna return void so it's not gonna return anything it's only gonna print the sound right because it's printing something and then here we also have to add the abstract in front of that as well so for example if i go down there and i say uh class and then i'm gonna say let's say dog and then say extend so we're gonna use the same keyword so extends and we're gonna extend the animal class right so if i do that now you can see that i'm getting an error and we didn't get this error when we extend this class before when we didn't pass anything else we just created the instance and then we have opening and closing curly braces we didn't get an error and i can show you that real quick so if i delete all this and put the closing curly braces you can see that we don't have any errors because this is an abstract class okay so gonna undo all that now when we have an abstract class and then we define this method we just put the description of the method so we're gonna say you know that's the name of the method it's gonna take a parameter called sound and it's going to be a string and it's not going to return anything then i am forced or obligated to implement this method as you can see here so i can do a quick fix implement and now that i'm implementing this print sound method then now the error is gone so if you want to force any class that extends your class to implement certain methods then you can use an abstract class and then define the blueprint of your methods so that any class like the dot class here that extends the animal class then they're obligated or they're forced to give their own implementation of the print sound so what i can do here is to just say console.log and then say something like you know bark or something and we can also have properties inside of the abstract class as well and we can define a constructor so for example i can say constructor and let's say we're gonna take a name so we're gonna say private name and that's gonna be a string right so every dog is gonna have or every animal always gonna have a name right and then here let's say i wanna create an instance of this uh dog we can't create an instance of the abstract class by the way and i'm gonna show you an example so if we're gonna create a new instance we're gonna say you know const and then that's the name of the dog and then we're gonna say new and i can do a new dog but i can't do a new animal so if i do a new animal you can see that even if i pass something in here let's see i'm passing the name i'm getting an error and if we hover over it you can see that it says you can't create an instance of an abstract class because this class is abstract so just keep that in mind whenever you have an abstract class then you can't create an instance of it you can extend it and then use your child class and then call the parent class constructor but this class itself the animal class then you can create an instance of it and that makes sense you can see how that makes sense in the real world as well and that's why i took this example because you're never gonna have an actual animal that is just an animal right you can have a dog that is a specific animal and then it extends animals so it's gonna inherit some properties and functions from the animal class so now to fix this i have to change this to dog so i create a new dog and here i can pass in the name so here again i'm going to pass in the name of the dog which is blackie and we can also have properties so if i come down here and then i can say you know console.log and go ahead and run that you can see that i have the dog and then the name is blacky and i can also call the method so i can come here say blacky that print sound well we're not we're actually supposed to be using this sound so let's pass this in here let's make this a template literal so that we can pass in the string so i'm going to say dial sign open and close curly braces and then i'm going to pass in the sound and then dot dot so then i can say print sound and then pass in the sound of the animal and i'm gonna say barking and then run it again you can see that barking because it's a dog and then the name of the dog so you usually use abstract class when you want to force other classes to implement certain methods or to have certain properties that they have to implement whenever they extend your parent class as you can see that i'm doing here and usually when you have a parent class like this which is abstract it usually represents some very vague entity that you can use to create a concrete entity or a concrete object of something in this case you can see that this animal is a very very good example and also a very popular example because you're never gonna have an actual animal that is just an animal it's gonna be a specific animal either a cat or a dog or a tiger or a snake or something like that so you're never going to have an animal that is an animal so that's why you create this as an abstract class you can never have an instance of a class that is abstract but you can also extend that class and then create an actual animal in this case we're creating a dog the same way we could create a cat or a snake or a horse or something like that which is a specific animal so always remember if you don't want to enforce the child classes to implement any functions or anything like that then you would create your simple class and then you can have any other class extend that class like i'm doing here you can see that this is a normal class and you can see that i'm doing this in this example so i have the person class and then i have the u.s citizen which is extending the person class i can override or i don't have to override any methods that is in this class but whenever we define it as abstract then we put the blueprint of the methods then any other classes that extend this abstract class then they're forced to define or implement the methods that you put in there as the blueprint so that is the main difference to keep in mind and of course it will be up to you to decide if you want to use an abstract class or just a regular class so it's going to come down to implementation what you're trying to accomplish what you're trying to do but that's the main difference between a regular class and an abstract class and i hope that makes sense and at this point we've covered a lot in classes there is a lot more to cover there is like singleton pattern private constructor so there's a lot more to classes and really this is just a very basic introduction to classes in typescript and i hope all of this makes sense and if it doesn't please go ahead and reach out to me i'll be glad to help you and in the next section i'm going to start talking about interfaces and then go from there so i'll see you guys in the next one let's now take a look at interfaces so the first question you're going to ask yourself is what is an interface right an interface is something that you can use to define the shape or the structure of some object of some sort so to create an interface you type the keyword interface so this word only exists and typescript doesn't exist in javascript so let's say i'm going to define a computer for example so i'm going to say computer open and close curly braces now inside of this computer i can determine the shape that i want every computer to have so anything that has this type of computer that has this interface then they're gonna have to adhere to certain rules that i'm gonna have inside of this interface so for example i can say every computer is gonna have a name so i'm gonna say name and then i'm gonna give it a type of string okay so that's the difference as you can see here i'm not assigning any value for example i'm not doing something like this like passing a string here for the name that's not gonna work in interface and the interface you only describe the shape which means this computer is going to have a name property again describing the shape of an object so i'm going to say the name property has to be a string and let's say ram also has to be a string and then we can say size and let's say that has to be your number and now we have this interface and we can type anything that we want to this interface so for example i can say let latitude that's the one of the first computers that i ever had i don't remember the number but it was like one of the old models and then i'm gonna say that's a type computer so i can just define it like this now anything that i assign to a latitude here so the variable that has the type of computer it has to adhere to these three variables so for example i can say latitude and then i'm going to set it equal to an object and then inside of this object i have to define a name a ram and a size and they have to be you know the same type so the name has to be a string the rim has to be a string and the size has to be a number as you can see that it's giving me an error already because i'm not following the properties from the computer type so now i can do name and then at this point i'm going to assign actual values so here let's say latitude and for the ram i'm just going to say the ram is i don't know 32 gig or something and then let's define the size which i'm going to say 15 for example as you can see now the error is gone and now my object which is this latitude it has to follow this structure it has to has this shape that you can see here and i can hover over it you can see that it's of type computer which is this type that we define up here another thing we can have inside an interface is a method so i can go down there and i can say this interface also has to have a method that i'm just gonna name it connect and uh let's say it's gonna take an adapter for example so adapter which is gonna be some kind of string and here what i'm gonna say is i'm gonna give the return type so say it's not gonna return anything so i'm gonna say void you can see that i'm not implementing this method in any way i'm just defining the shape that the method has to have so now inside of this latitude you can see it's giving us an error because we need now to define the connect so down there i'm going to say connect and we're going to take the adapter so adapter which is going to be a string and then it's going to return void now i'm going to give an implementation and i'm going to open and close curly braces and let's say i'm just going to console that log let's do something like power on connected to adapter and then we pass in the adapter that we got adapter so now this is a concrete implementation of this function here that i defined just the shape i can remove that space so you can see that you can define everything that you want a certain object to have using an interface so now i can come down and let's say we're going to call the latitude and then call the connect and say we connect it to adapter uh one for example right so we're just going to call the connect if you go ahead and run this file now you can see that power on connected to adapter one and i can go ahead and log the entire property so i can do console.log and then pass in latitude so that we can see everything and then run this file again you can see that we have the object right here so this is how you define an interface and interface again they're used to define the shape or the structure of certain object now there's a difference between interface and type for example you can do the same thing so you can say type and then really just put an equal sign here and you can see that that would do the same thing and i can go ahead and run the code you can see that we get the same result but the difference between type and interface is that a class can implement an interface or multiple interfaces and also whenever you're defining shape of objects most likely you're not going to use a type you're going to use an interface and also you can have union in type so for example i can have a type of number or string but i can't have union type whenever i have a i have an interface there's other things i can do to manipulate an interface of course they're very very flexible and i use them a lot but those are the main differences between interface and type type can have union type but for interfaces you can't and interfaces are widely used in a definition file so if you have a library even if it's a javascript library you usually have definition file that are in typescript so they're heavily used to you know create a contract that if a class implements certain interfaces then they have to define certain field or they have to implement certain methods so they're really very flexible and widely used in a lot of languages and also in a lot of type definition like i mentioned before interfaces are used a lot with classes and i want to give you guys an example so i'm going to go and scroll down and down here i'm going to create another interface so i'm going to say interface and this time let's call this http connection hopefully this is not already taken in the namespace so http connection that's going to be an interface and this interface is going to have one method which is going to be the connect uh or let's do create connection since i already have connect and it's gonna take let's say um like a url that's gonna be a string and uh it's gonna return a void okay we can make it return something else and also we haven't talked about void those are like some advanced not advanced but different types that we're going to be looking at a little bit later but void pretty much means that the function or the method is not returning anything so now that we have this interface so let's have another class here so let's see we have a class and this class is make connection and i can't really think of a good class now what we can do is we can implement the http connections we can say http connection and now you can see that we're getting an error because now we need to have the create connection and if i hover over it you'll see that it says we're not implementing the interface correctly so if i use the quick fix here you're going to see that it's going to ask me to implement the create connection so let's uh give a an implementation here so let's say this is going to be like console log and connection created to and then we pass in the url that is just an example and you will see that a lot of times when you're working with framework for example you will see that they have a lot of interfaces that some classes have to implement if they want to have certain functionalities and you see that a lot in typescript and of course since this is a class i can have other things on here so i can have like private and let's say headers and let's say uh this is a string array or something like that and i can have let's say private body and let's say this is uh another string and we can also have a constructor so this can be like a normal class so here we're going to say we're going to take headers and that's going to be a string array and also a body which is going to be a string and with this constructor we can pass in this value so this that headers that are equal to the headers and then this that body equals the body so we can have like a normal class but the only thing is this class now we'll have to implement the create connection so the fact that we implement this interface we can always do everything else that we can usually do in any class the only thing is now we're required to implement this function down there because we're implementing the http connection in the http connection has this great connection that we have to implement and of course the signature of the method has to be the same so for example i can't change this and say number if i do that it's just gonna say hey this is not good and if i change this name then it's gonna complain that i'm not you see now at class level it's complaining that i'm not implementing this method so like i said this is used heavily in type definition and and also in a lot of frameworks if you want to have certain functionalities in the class then you can implement you know certain interfaces and then because as a result of that then you'll require to implement the you know a function or have certain fields inside of the class and this would be like a normal class we can create an object out of this class and then call the quick connection we should see this printed on the console another thing we can do with interfaces is we can have one interface extend another so i'm gonna scroll down and go down here and let's say uh i have an interface and i'm going to scroll up some more and let's say this interface i'm going to call it uh patient for example and this patient interface is going to have to have uh oops interface and say we need to have a name which is gonna be a string right now let's say i have another interface so i'm gonna say interface and i'm gonna name it client and i can have this interface uh have say rating for example and let's say this is gonna be a number right so we have two interfaces we have one that is patient and then we have another one that is client and now let's say i'm gonna have a class and let's say this class is gonna be uh tenant for example now i can have this class implement the client right so i'm gonna inherit everything from the client so i can say rating that i'm obligated to have which is supposed to be a number right and i can pass that in a constructor so i can say constructor i'm gonna take a rating which is going to be a number and inside of this constructor i'm just going to say this that rating equals rating right so i'm obligated to have this rating and i'm just setting it inside of the class like this for whenever an instance is created another thing i can do which is very flexible is let's say i wanted to have this tenant to have the name as well so i can also implement this interface so i can come here and say patient so now i'm obligated to have this name and i can do the same thing again so i can do name which is going to be a string and i can come down here and take the name n and then do the same thing that i did here so this that name equals name so i can do that and you can see that works as well so now what i can do is i can make the client interface or the patient interface extends the client or one another it doesn't really matter so here what i can do is i can say extend patient since i'm implementing this client i don't have to implement the patient anymore i can just remove it because when the client interface extends the patient interface it also inherits the name property which is why if i remove this here then it's going to complain because it's almost like this client has this name inside of it because we're extending it so i'm going to undo this and also another thing is you can extend multiple different interface so i can say um you know another another one another one so i can have another one and another one i can extend as many interfaces as i want as long as i have them so that's another thing you can do which you can't do in classes and inheritance when you have like an abstract class or you're inheriting from another class you can only extend another class with a class but with interfaces you can extend multiple different interfaces and with classes you can also implement different interfaces so as an example i can come back here and say patient and that should also work just fine and i think we have another interface up here so i can say computer obviously this example is not making sense but i'm just showing you that with implements for interfaces you can have them as many times as you want i can say computer now it's going to complain that i need to have you know the name the ram the size and the connect but you can see that you know it's it's not giving me an error here and if i hover over it you just say that i'm incorrectly implementing it so use the quick fix uh then x and paste this here and we would have to pass those in the constructor as well like this and just like that and then set them again ram [Music] equal size and you can see that works just fine so this class implements three interfaces and you can keep going and going and going i don't know if it ever gonna give you an error like if you implement a thousand but obviously that's not a realistic uh thing to to think about but as you can see here with interfaces you can implement them as many as you want and with interface itself you can extend any other interface you can extend as many as you want so very very flexible and i'm just gonna remove the computer here and remove these two and get rid of these and get rid of these two so make this a little bit cleaner but at least you understand what i'm trying to do here so with interfaces you can extend other interfaces so as many other interfaces as you want and with classes you can implement as many interfaces as you want oh by the way i don't need this patient here because the client is extending the patient interface so with this you can have very very nice and elegant code whenever you're using typescript as your programming language another really cool thing that we can do with interfaces is we can define them as type for function so for example uh let me scroll up more i'm gonna define an interface so i'm gonna say interface and i'm gonna say this interface name is gonna be calculate right uh so calculate and then open and close curly braces and what i wanna do here is i wanna take two numbers so i'm gonna say i'm gonna take one number here or number one that's gonna be a number and let's say number two that's also gonna be a number and then i'm gonna say the return type is going to be let's not do void let's do a number so it's going to return a number and it's also going to take two numbers so you can see that i define this interface so i use the interface keyword and then i give the name of the interface which is calculate calculate so that's going to be the name of the function or the name of the interface and then inside of it you can see that i'm just going straight for the parameters so i'm saying it's going to take two parameters two numbers and it's gonna return a number so now i can come down and then say let for example cal and then give it the type of calculate so calculus is going to be the type and then i can say cal now give the implementation of the function remember it's going to take two parameters and then let's use the error function this time so error function and here we're going to say we turn a plus b for example and we need to pass those parameters in there and let's also pass this parameters so that's going to be a number and then b also a number and by the way we don't need to have the same name as long as you have one first parameter which is a number and the second one which is number so as long as the types are the same then you should be fine so you can see now i'm using the calculate here as a type for the cal which is really just a function and we're using an interface to determine that you can do the same thing with the type keyword but i'm just showing you another feature that you have when you're using interface and of course i can come down here and call this function like i would call any other function so i can pass into values and just so we can see something on the screen let's just console like that as well and pass in cow and let's go ahead and run this file you can see that we get the 15 at the bottom so you can use interfaces as type for function not just object because in the end a function is really an object in typescript or in javascript and that's why this is possible so you can use an interface to define the type of a function one last thing i want to say about interfaces is you can have optional properties for example you saw that when we didn't have the name the ram and the size and the connect this was giving us an error so sometimes you want the interface to be even more flexible so you might make some properties optional and to do this you just put a question mark so for example if i want to make the size optional i just put a question mark and if i remove it from here you can see that it's not going to give me an error anymore because it's optional i can do the same for the rain for the name and for the connect for the connect which is a function you just put it here and then it's going to do the trick now it's giving me that this is possibly undefined because now it's optional so typescript is kicking in saying hey you got to be sure that this exists so you can you know put an if statement and correct this if you want but you can have optional properties inside of your interfaces and another thing you can have is you can have read only so if i make this name read only you can see that's going to work and what that means is that once this is set you cannot set it again and that's what the read-only means so we're saying technically once this name is set for whoever has this type or implement this interface then it can't change once it's set it's once and for all but we can't have things like private or public so if i put private here you're going to see that it's going to give me all kinds of errors you can have private you can't have public you can have protected you can only have read only okay and like i said interfaces widely used in the typescript language you're gonna see them everywhere you're gonna see them all the time and like i mentioned before in type definitions for like libraries and stuff if you go inside of those file definitions then you're gonna see interfaces all over the place so they're used widely to define shape and structures of object and whenever i'm coding i usually find myself defining some interface because i'm trying to map certain object to a certain shape and certain structure so used very very often when you're working with typescript what we're going to talk about now is genex now generics and typescript they're exactly what you know that they are in c-sharp or in java which is really just a way to make your code more reusable and really what genetics are is just something that we have in programming where we can work with a variety of types you can have for example one method or one class and you can work with different data types with that same class or that same method and as i go through the examples that i'm going to show you it's all going to make sense it's better that i'll show you examples and cases where you would want to use a generic instead of trying to you know define what the genetics are but it's really just a way to make your code more reusable so for example let's say i'm gonna have a function and let's say i'm gonna call the function update user for example now i know the function is gonna take some parameter it's gonna return something so i'm not gonna put the return type now just so i can illustrate this better and let's put the body of the method so what i want to do for example let's say i'm going to receive two objects for example so i don't know what those objects are going to be i don't know the shape of them i don't know the type of them but i know i'm going to get two objects inside of this method and what i would like to do is to just merge the two objects and then return one object so what i can do is i can come in here and i can say let's say uh old user for example so we're gonna take an old user that's going to be any for example and we're going to take the new user information for example also that's going to be any because you can use any when you want to go back to javascript technically you don't have any type at all and we can also say that this is going to return amy because we have two any types and we're returning to any types and then and the value of the function what we can do is we can just return a new object right so we're gonna put open and close curly braces and then inside of there we can just merge the two objects that we know we're gonna get so we're gonna say use the spread operator get the old user and then spread out order again get the new user so what this is going to do is it's going to take all the properties into objects and then merge them so whatever we already have in the old user is going to be overwritten but what we have in the new user if there is something in the old user that's not in the new user then it's going to stay and that's just one way that we can emerge to object you just make copy of them and you put them inside of the curly braces and then you have a new object now using any here as you can see is not a very good practice because we're technically saying hey we're going back to javascript now another thing we can do here is we can use generics and what that means is that we know that it's going to be of some type we just don't know what type it's going to be so whatever type it is then that's the type that it's going to be for these two objects and the syntax is like this so i'll come into the after the name of the method and i put opening and closing diamonds and then let's say the first type is going to be t and then the second type is going to be u or i can use v here i can use any letters like z oops i can use z i can use anything that i want but in this case i'm going to go ahead and use for example v right and then here instead of any i can just change this to t and in the second type it's going to be of some type that's going to be v and that's going to do the trick now since we're merging these two objects together then it's going to give us a merge of these two objects so a merge of t and v so instead of any we can do it's going to be t and v because we're going to merge all these two together and you can see that we were getting an error and now the error is gone so now i can pass in two objects inside of this update user and then it's gonna merge the two objects into one object and return that to me and another example that i can show you so if i copy this for example and it commented out we're gonna use it in a second i just want to show you so for example if we're gonna take one object we could just do this so we would say we're gonna take t which is gonna be some kind of user so i'm gonna change this to user and remove that one and then let's remove this as well because this time we're just going to return t and then here all we have to return is this type t or we can return anything that we want because really all this is saying is we're going to receive a type that we don't know but we know that it's going to be of some type and we're just saying here that it's going to return that same type so whatever we do here as long as we return the same type so for example i can say all right just give me everything in user and let's add another property so i can say admin and that's going to be for example true right so that's just adding another new property inside of the object that we're going to get we can rename this like make admin for example right so we're going to take a user we're going to add this admin property set it to true and it will return that new object so whatever we get here with however how many properties that we get doesn't really matter we're just going to copy everything that we already get and then we're just going to put this admin to true and return that so let me uncomment this so now i can come down here and i can say let and let's say user 1 if i don't already have that and set it equal to some object so here i can say for example they're going to have a name so i can do name and then set it to my name here i'm just gonna say junior so that's user one then i'm gonna duplicate this and let's do user two user two is just gonna have an age uh so i'm gonna put some h here so let's say 25 and then i'm gonna change this to age so age and we can add more properties here so i can say is or gender for example and gender is going to be like a string so i'm going to put like m for example and we're going to change this to user two so now we have two users you can see that they're not the same we have two different types of user here we have one which is an object that contains a name property and then we have another one that has an age and a gender and i can call this update user with this two objects that i have here and it's not gonna complain or anything i'm just saying here that i'm gonna get two different objects because this is t and this is v and the first one is gonna be of type t and the second one is gonna be the type v and what this means is that whatever type that this is that's gonna be what that type is and that's going to be the type of this first parameter and for the v whatever the second parameter is that's going to be the type of that which type is that we don't know which is why we can do whatever we want in these objects we can you know add more properties we want we can add an array we can do whatever we want as long as this code will work whenever we call the function with the parameters that we're passing it in we should be just fine so now i'm gonna come down and i'm just gonna say update user and then i'm gonna pass it user one and user two and you can see that it's not complaining it's not doing anything because we're just passing in two different types and that's exactly what i'm specifying here and we can console like that so let's do that log so that we can see something on the output so if i go ahead and run this we're gonna see that these two objects are gonna be merged which is what we're doing here so like i said whatever we take here it doesn't really matter so we can specify whatever type we want v t doesn't really matter the only thing that really matters is what we do inside of this body of the method because if we do something that doesn't go with the type that we're passing then we get a problem and this is supposed to be user two so let's change this to two and let's go ahead and run it you can see now we have the merge of the two objects you can see we have the name then we have the age the gender and i can do the same with the make admin so let's go down copy this and then paste it this time i'm going to call the make admin so i'm going to copy this paste the name here and pass in just uh let's pass in the second user because it has more properties so we can see something and then go ahead and run it again you can see now we get the second one which is the age of 25 gender is male and the admin now is true so we added this new property inside of it so to take away with this is whatever object that i pass in here will work because i'm just merging the two together now the only time you're gonna have a problem is if we pass something inside of this method pretty much anything will work here because we're just specifying a type which doesn't know what it is but it's the code that we have inside of the method we have to make sure that is safe because if someone passed me a string here is this going to fail if they've passed me a number is it going to fail what if i do let age for example and then set it equal to let's say 55. let's rename this to user age because it's giving me an error that means i've used this variable at some point in the past so now let's change this to instead of user two we're gonna pass in the user age again you can see that it's not giving me an error so as long as we make sure that the code inside of the method is safe it's not going to fail if they pass me like you know a boolean or an object or a number or something like that then we should be fine that's the biggest thing you have to keep in mind when you're working with generics with the method in typescript because it's the operations that you're doing inside of the method that really is important you have to make sure that you really think carefully about so now let's uh comment this out and let's go ahead and write it again and see what we get so now you can see this is just giving me the first object because he wasn't able to do anything with that number so that's the only thing you have to keep in mind when you're working with genetics with the method you have to make sure that the operations you're doing inside of the method doesn't fail or doesn't behave weirdly or something like that whenever you call it with different types so the only thing we know that we're doing inside of here is we know that we're supposed to call this of the user with two different objects because we're merging these two objects inside of the body so as long as it's two objects we should be fine so what happens if we pass an array so let's just do this let's turn this into an array and let's say this is going to be 55 and let's say 20 and see what happens so now if i go ahead and run this you can see now we get the array because an array is kind of considered of an object so it gives us the index and then the value is going to be the value that we passed so the index value index value so it was able to merge this array because really an array is an object so like i said whenever you're using this format or you're using this format just make sure you call the method or function with a proper type depending on the operation that you're doing inside of the method because that's where really the only problem can occur because it's never going to give you the problem if you pass anything here like i'm going to change this to a boolean if you want to see that see i change this to a boolean what that means is that this user age is going to be of type boolean that's all it's going to do it's not really doing anything else so really just make sure that whatever you know operations that you're doing inside of the method work appropriately for the data that you're passing whenever you call the method we can also use generics with classes so let me scroll down a little bit and let's say i'm going to create a class and i'm going to call it planet for example so i'm going to say planet and we're going to take some type and to do this again we put the less than sign and then we put the type in here for example t well i've already used t and i've told you guys that you can use any letter here and it really doesn't have to be a capital letter you can put a here that's the works but you usually see like a capital letter and if you're gonna use two of them like you're gonna have one type and then another type and then another one it makes sense to use the next letter and the alphabet so for example when i used t up here earlier uh it would make more sense for me to use u here because the next letter after t is u and usually while you see t is because t stands for type but really you can put any letter that you want just to illustrate this i'm just going to change this to let's say for example z and it doesn't really matter because you just need to have some letter in here that represent the type that you're going to be working with inside of the class so now i can start working on the class and i'm really just doing this on the fly just so i can give you an example so let's say we always want to know the location of the closest star so we're going to say closest star right so that's going to be the star that is the closest to the planet and then we can just say this is going to be of type z so whatever the type is that we pass in here for the closest star we're just going to say that's going to be the type for that star so that can be a string a boolean a number an object an array can be anything we just know that whatever the type is you can just give it to the class and that's going to be the type of the closest star so now uh it's complaining because we don't have a constructor so i can have a constructor and let's take the closest star so we're gonna say close a star i'm just gonna copy this and just paste it in there and again we're gonna say well what type is it we don't know whatever the type that is passed to the class that's the z type because that's the only type that we know and then inside of the body we can do what we usually do we just do this that was a star equal look at the star that we get in the actual constructor so i'm going to copy this and just paste it here so now if i want to define a new planet for example i can come down and i can say constant and i can say earth for example and set this equal to a new planet so i'm going to say new planet and that's going to be of the type string that's going to be the type of the sun so now since we specified that the type is going to be string we just have to pass a string so let's say sun for example so you can see how flexible this is and i can do let's say i don't know some other planets outside of the solar system so i'm just going to say i don't know planet x for example and let's say that the type of their sun is going to be some object we can do that as well and we're going to say this object is going to have like a name property which is going to be a string and it's going to have let's say a distance for example and that's going to be a number and i'm going to move this over a little bit so now all we have to do is to provide this object into this constructor because you can see that this is what it's expecting here and to save time i can just copy the sim check again and let me just close this for now so we can see what we're doing and then paste it here now i have to give the actual values so here i'm going to say their name of the son is so rocks for example i'm just making this up and the distance is let's say i don't know 10 and i'm just making this up as you can see that you can use this with classes as well now you can see this is a little bit verbose and what you would usually see using generics like this you would see that they use some interface so they would pass in some interface here or some type using the type keyword so it would define a type like this and then pass it in here instead of manually describing the object like this and we can also use them with interface so i'm going to do interface and let's say this interface is user data for example and we're going to say it's going to take some type so we're going to say let's say let's use u this time and then open and close curly braces and let's say for the user data interface it's going to have a size for example and let's say that's going to be some number and we also say it's going to have the actual data for example and we can see that this data is going to be like an array of some type t well not t because we're using u so that's u so this data is going to be of type whatever type that we tell it that it should be the same way what we're doing here when we call the new planet when we call the constructor because when we do this then we say hey the star so this closest star is going to be of type string so we're passing a string here if we pass anything else here of course it's going to yell at us and we did the same with planet x so when we call the constructor again we pass in the type which is an object and then this object has a name property and a distance property and that's why we're giving it here to the constructor as you can see here and like i said you would see a type used like this so let me just remove this so that i can give you the example better so let's say this is going to be like a string for example so string array for the data well that's not really going to make sense but i just want to show you that this is the typical way that you would see this so here instead of passing this object here you would say something like user data so you pass in the type here and then now you have to pass in a size which is going to be a number i'm just going to put it here and then the data which is going to be on the array of strings so we're going to see the data and let's see if we can encapsulate this we're going to pass in another string and we can pass in another string let's say this is a i don't know us a system with two stars and let's say the other star is like zourax like a female one just picking this up and now we have to change this to let's say planet z for example so you can see that this works just fine i just wanted to show you that you can use generic with interface and that's usually what you would see in everyday life when you're coding with typescript so you would make something a generic and then you define interfaces and whenever you're giving it the type like we're doing here so we're defining the type so here and here and here we pass in the interface as you can see here but i also want to give you the interface example for type so let's paste this down there and let's just call this customer data we're gonna give it a type what can we use this time let's use k this time and it's gonna have a k type or an array for the data for example and we didn't have to name this data we can name this anything so now i can come down here and say let for example new user one and then we're gonna give it a type and let's say we're gonna give it the type of customer data so we're gonna say customer data now we have to pass it the type that's gonna be used for the data type which is the second parameter that you see here so now what we can do is just open a closed curly braces we're just gonna say it's gonna be string and it's happy now we can make this anything boolean so it's gonna be an array of boolean it can be an array of number or some type of array string array or something so we can do like string and you can see that works as well anything really we just work here because we say it's generic it can be used with any type that we pass it so here for simplicity i'm just gonna say this is gonna be of type number and it's happy now so now what we can do is to call the new user one and then we're gonna set it equal to something so it's gonna be an object because this is an interface and then here we're just gonna say well we need to get a size so size you can see it's coming up in let's say 77 and then we have to give it data so you can see here we're defined that the type for this array is going to be a number and we could have more properties in here so we can say something like report let's say it's going to be an object and it's going to have let's say files for example and that's going to be of type k so i just want to show you that you can have many different properties inside of the interface that can use this same type that you're passing here so whatever the file is is going to be like an object because we're using the curly braces and it's going to have a property which is going to be file and it's going to be of type k which is like a number that we're defining here so you can see how flexible this is but just so i can give you this example real quick i'm just going to comment this out so now we have to give it some numbers so we can see like five two and then let's say one for example and that works as well and we can console log all these things they all gonna show up on the screen so let's scroll up let's copy this console log scroll down a little bit too high and let's paste this and this time i just want to log out the new user so let's just remove this and paste this in here and run it again make this a little bigger and you can see size 77 data which is the array that we're passing in here so you see how powerful and flexible this skin really is really i always find myself using some kind of generic and it makes my code very very elegant and it really shows that you know exactly what you're doing and of course you have to use it whenever there is a need for it you don't want to just like be using generics randomly and it's also a fancy word that you might hear in programming languages but it's really just you know a way for creating reusable components or reusable code in your code so as you can see here we're using the planet with string with our own object with this interface and we're using this now with number and we know we can pass any type that we need here so i hope you guys understand um pretty much everything that i just talked about again you can go back and rewatch the videos but at this point in the course i feel like you kind of know enough to get into some practice so we're gonna be doing in the next videos is we're gonna try to see if we can build an application from start to finish and this application is gonna be a backend application so i'm gonna be using node.js and then i'm going to use typescript and i'm going to show you how you can you know create an application organize your files and everything and we're also going to be getting into database i'm going to start simple and then we're going to you know make it a little bit more complicated when you go over all these videos like this you're pretty much gonna forget most of these things that you learn because you don't practice them so it's really important that you practice what you learn and that's how you really actually learn in the information really gonna stick in your head so what i'm gonna be doing in the next module is really just build this node.js back in application uh it's gonna be like an api and it's gonna be talking to a database and this is how we're gonna take all this information all these videos that we just learned we're gonna put them in practice and you're gonna see how everything you learn here is gonna come into play when you're building an application and if you guys need to go back and watch another lecture again you can go ahead and do that because you know when you learn all these things it's really high level information and it's not gonna stick once you watch it once or twice and you also have to practice it which is why we're gonna build an entire application another thing i want to mention is i'm also gonna be using docker so if you guys don't know docker don't worry too much and also if you don't know sql don't worry too much when we're gonna build the application i'm gonna go slow and i'm gonna you know explain everything that i'm doing explain every single line of code so you guys understand but it's really important that we you know go ahead and build something and put all this into practice so at this point you can take a break and you you know you can go grab some coffee or you know call it a day and then come tomorrow or if it's the weekend then you can you know start again monday but i just want to make sure you understand that this is the time for you to take a break if you want to take a break and also if you're not very familiar with node.js packing applications then you can you know watch some tutorial just to get up to speed and then come back to continue the course but like i said we're going to be dealing with a lot of information a lot of different technologies you know http requests response application calling all the applications handling requests reaching out to a database writing sql queries so we can create a database using docker so we can containerize our application so all of this is going to come into play and unfortunately i got to tell you this becoming a developer or a full stack developer or a software engineer you really need to embrace many different technologies and that's what i'm going to try to teach you in this course so don't worry too much if you don't know docker don't worry too much if you don't know sql and really the only thing i would say is to be a little bit familiar with node.js and how a node.js application is created just the basics you don't need to you know know a lot or be an expert on anything because i'm gonna explain everything that i'm doing so take a break review some of the lessons that we talked about and then we're gonna come back and put all this in practice and all this code you can find with the course so you can have everything at your disposal and then come back to the course already so that we can build our first application we're gonna build multiple different applications but that's gonna be the first one and all these applications that we're gonna build we're gonna be using typescript and i'm gonna show you how taskscrip is really powerful and apply everything that we learned in this course so far so take a break relax and then come back so that we can start building our application what we're going to be doing from this point forward is building the first application that we're going to be building in this course and this application is going to be the backend application and we will be building a front-end application to communicate with that back-end application but we're going to start with the back-end application and build this thing out and then once we're done we're going to test it and then we're going to build the front end to communicate with the backend so i'm back in visual studio code and uh everything that we worked on so all the files that we worked on they should be available to you so make sure you grab all the code and then review everything that we did and like i mentioned what we're going to be working on right now is the backing application and we're gonna be building this using node.js and we're gonna persist our data and for this we're gonna be using the mysql database server and in the end we're also gonna be deploying this application and to help us with this we're gonna be using docker so we're going to be doing a lot of interesting things here so let's go ahead and get started so the first thing that i want to do since i don't have a like a visual to show you of what we're going to be building in the end because we're going to be building this together so i don't have anything to show you as to the final product that we're going to be building however we have to talk a little bit about what exactly we're going to be doing so i'm going to open a new file here and that's just going to be like a text file or something and i'm just going to talk a little bit about what we're going to be doing just so you guys know exactly what's coming so the backend application is going to be something called an api which is application programming interface so i'm going to say application programming interface so an application programming interface this is really kind of a broad concept because an interface is in so many different places for example your cell phone has an interface which is the the keyboard or the screen that you use to interact with the software or the underlying software so that is an interface so it's anything that allows you to connect to some application that you use to talk to another application or talk to some other technologies or talk to some other entity and you can see here um if we look at this a little bit closer it says application programming so this is like technology stuff and then the keyword here is interface interface here is made of two words which is enter which is in between and then face which is uh like a facade or uh the endpoint of something so really what this means is that it's the endpoint that's going to allow something to be communicated with something else but i want to make sure that i center this around you know software development so we're going to be focusing on that definition for just software development itself which is you know building api so that we can send requests to them and then interact with the api that way using http protocol which is like the most common way that you know we build apis and how we communicate with api so we're going to be building that which is going to be an application programming interface or an api or a node backing application that you can communicate with using the http protocol over the internet so that's what we're going to be building so some of the stuff we're going to need is we're going to be working with because we're gonna be persisting in our data so this is gonna be for data persistence and we're gonna also need to handle requests to handle http requests and we need to handle uh course so that's cross origin resource sharing and i'm gonna talk a little bit more about that a little bit later and we need to deal with something called sql queries because we're going to need to write queries so that we can manipulate our data in the database and then we're going to be using darker so docker is going to come in the very end because that's what we're going to be using to just uh wrap up the application into us you know a nice docker image and then we can run that image on any computer which is gonna make deployment a little bit easier for us and this is really um everything that comes up in my mind right now there's probably more uh things that we're gonna be doing that i can't really remember but at a high level um we're gonna be building a node.js application so let's make sure i put this at the top so this is gonna be a node.js app and it's gonna persist data using mysql we're gonna be handling ac request because it's an api so it's going to be like a standalone application and the way that we're going to be communicating with this application is by using the hdb protocol so we're going to be using the http protocol sending http requests etc which is what i'm talking about on line six so handle hdb requests and another thing that comes to mind is route so we're gonna be dealing with uh creating routes in the application and we're gonna need to create a uh a database configuration so configuration and another thing is the controller so we're gonna be using the model view controller pattern so we're gonna be building a controller and one last thing that comes to mind is something called air handling okay because when you build an api it's very important that you handle all your errors so we're going to be doing that as well so whenever we're done building this application and we run it and test it and everything we should be able to test it in the browser and we should be able to test it using postman or any other http client that you want but we should be able to send requests with the proper data to the proper routes and then we should be able to see the application in action so that's everything that comes to mind right now and of course when we're going to be building this everything that comes up i will let you guys know and that's uh what we're gonna be doing so i mean this is something that i'm just thinking about out loud so we don't need to you know put this anywhere you don't need to copy this or anything like that this is just me having a conversation with you about things that we're gonna be uh dealing with when we're building this application all right so we have a lot to do so let's go ahead and get started so i'm back in visual studio code and i have my terminal open and i've already navigated to the folder where i want to create the application and i'm going to do mkdir to pick a directory and then i'm going to call it node.js api okay so that's going to be the backend api and then i'm going to go inside of this folder and clear the screen so the first thing that i want to do is to start a node project right because we need to manage our dependencies and we need a package.json file and we can do this pretty easy we can just do npm init and then we can pass in a dash y so that we can accept all the default and what this is gonna do is it's gonna go ahead and give us all the default and create a package.json with no dependency whatsoever so i'm going to press enter and you can see that it gives us a snapshot of what it created which is the package.json file as you can see here it created the package.json and they give us you know a little preview of what's inside of this file so i'm gonna go ahead and clear the screen again and the second thing that i want to do is to do tsc so i'm invoking the typescript compiler and then i want to do dash dash init okay this is similar to what we just did which is npm init but this is for typescript compiler and what this is gonna do is it's gonna generate a ts config file for us so i'm gonna go ahead and press enter again and it says actually created the tsconfig.json file so i didn't talk much about this file when we were going over the different types in typescript and stuff but now that we're going to be building an application it's important that we take a closer look at this file so let's go ahead and do that right now so since i'm already navigated inside of this folder i'm just going to code that and that's just going to open visual studio code in the in this directory i'm going to go ahead and bring it over here because it's open in my other screen here's visual studio code and i'm going to expand it so now you can see that i have the packet.json with all the default and then i have the ts.config file and i'm going to go ahead and collapse this for now and now let's talk a little bit about this file so there's a lot going on in this file as you can see here most of everything is commented out right that's because they know that most people won't be using all these configurations but there is some configurations that we actually do need to do so the first thing is we're gonna select the target which you see here on line seven and what that is is the target version of javascript that we want to uh transpile our code to or compile our code because you know typescript doesn't run in the browser in the end we're gonna get javascript so i'm gonna change this to es6 okay so a newer version not the newest version but you can change it to whatever version you want but i'm gonna stick with es6 and what that means is that whenever it's gonna take all the typescript code compile them and then uh you know transpire them to javascript then it's gonna do that using es6 syntax or es6 version of javascript and we can leave module for common js and i'm gonna scroll down a little bit this is also another very important one for um typescript so when you turn streak to true then it's gonna turn i think all of this to true okay so instead of doing every single one of these manually which they think that most developers would want to have turned on then they just created this other property here called strict and once you set this to true then it sets all these other ones to true okay so we're gonna leave that and if it's too strict we can come back here and then uncomment some of these and then comment out what we don't want but for now i'm gonna keep this to true i'm gonna scroll down a little more actually i need to scroll up and we need to enable these two properties okay so the first one is the outer this outer here is the directory that we can specify where all of the transfile javascript files are gonna go okay and for this first i'm gonna uncomment this and then uh make sure i keep the spacing the same and here i want to specify a folder that i'm gonna create that i don't have yet and i'm gonna call it this which is short for distribution and what this means is that whenever typescript is gonna take all the typescript code and then transpile it to javascript then it's gonna look for this folder and then put everything in there and make sure i keep the spacing the same the second one we need to enable actually i know i highlighted that one but that's not the one we need this other one which is the root dirt this is specifying where the javascript files are located so i'm gonna go ahead and uncomment that and then here i'm gonna put src which is short for source and what this means is that whenever typescript is going to look for files the typescript files to transfile into javascript then it's going to look into this src folder and takes everything in there so even subfolders inside of the source folder and it's going to transfer everything or compile everything through javascript i think transpile is a better word but you get the idea it's gonna take the typescript code turn it into javascript code so it's gonna look inside of the router which is gonna be inside of the source so everything inside of the source and every folder and sub-folders inside of the source folder take everything in there all the typescript code in there and then turn it into javascript code and it's going to put that code inside of this this or distribution folder and that's pretty much everything that we have to do here i have other projects like larger projects where i have a lot of these other properties turned on and turned off but this is gonna do for now because this file can be a little bit overwhelming because there's a lot of properties in here but they're really pretty simple like if you look them up one by one which is a little bit of a tedious task to do you'll see that they're not really um too crazy to understand but for now that's what we have to do and again you can change the target to whatever else you want but i'm going to be sticking with the es6 our important folders so where the source code is going to be and where the distribution or the production code is going to be or the javascript code is going to be and then we're going to leave strict es module enter pro we're going to leave that as the default as well and you can see what this is doing here if you read this little comment that they have here there's a couple things that we need to do in the package.json file so let's go ahead and go through this file and make all of our changes so the first one is the name the name is fine with me version is fine description we can put something here like node.js uh api uh with uh my sql and uh docker okay so this is just a description it doesn't really do anything the main file is the index file and i'm fine with that so we're gonna have to create this file at some point and then for our script so these are gonna be the script that we're gonna be using to run the application and i'm gonna create a first one to start the actually i'm gonna do start build okay so we're gonna create a script that's gonna go ahead and build the application and i'm going to delete everything in there and what i want to do is to call the typescript compiler so i'm going to do tsc.p okay so distance for project and then we have to give it the location of the configuration file where it's going to look at that file and then determine how to compile our application and we're gonna put that because the jsconfig file is in the same directory as the packet.json so calling csc dash p meaning compile the project and then we're giving it the location of the cs config file and it's going to look in there and then the reader configurations and then produce the javascript according to the configuration path that we're giving here by putting this data in here which means the same directory so i'm going to create another one i think i can do this little trick oh there we go all right so i'm gonna do two more the second one is gonna be for our dev development so i'm gonna put dev and the last one is for the production build so i'm gonna do a prod okay so we're gonna have three scripts one to build a project one to run our dev server and another one to start our production server so for the second one what i'm gonna do is to just call nodemon because we're gonna be installing nodemon as a dependency and we want to do exact okay so it's really important that we do this and then we want to exit ts dash node and we want to point to the index file so i'm gonna do src forward slash index dot gs okay so that's gonna be the name of the file that's gonna be the starting point of the application and we want to also compile this file because it's typescript so when you call ts node it's gonna compile to javascript and then run it like do two commands all at once with ts node and we're gonna install ts node as well if you don't wanna do that then you can you know put something else here like compile it and then run the javascript file but i'm just gonna go with this shortcut instead and then for our production build i'm gonna do tsc dash p again so we're gonna compile everything and then i want to set a node environment so i'm gonna do node underscore env and i'm gonna set this equal to prod okay so that's just a variable that i'm setting on the process in case i need to use it and then i'm gonna call node and we want to point to the distribution folder because you notice that we're calling tsc which means we're going to compile all the code so the code should be available freshly available inside of the distribution folder or the this folder and that's why i'm pointing the node command inside of the distribution folder because we already ran the tsc.compile and then we're going to compile all the code and we know that when this happens we put in a configuration to put everything uh if you scroll up a little to put everything inside of the distribution folder or this folder so that's why i'm pointing to this folder now and then i'm looking for the same file so that's going to be index dot js remember it's compile so it's no longer ts it's js so we're gonna run the compile js file that's located inside of the distribution folder when we're gonna run our application in production so compile the code and then we're gonna run this command which is gonna set this variable on the process and then uh run node and then point to the folder where we want to start the application and then lastly i can pass in my name here and uh keyword i guess we can put in some keywords so feel free to do that so that's what we're going to be doing for now and next thing we have to do as far as this file is concerned is that we need to install all of our dependencies and once we do that then we're going to have another section here that's going to be like dev dependencies and independences but we're going to have a bunch of dependencies for the application but for now everything that we have here should be enough so now let's go ahead and install the dependencies now let's go ahead and install all of the dependencies that we want so i'm still in visual studio code you can see it in the back here i just bring up the terminal and then i'm going to install the dependencies using the npm so npm install we need course because we're going to be dealing with a front end application and we want the front application to be communicating with the backend application and there's a thing in browsers called plus origin resource sharing which is going to stop two different applications running on two different domains to communicate with each other unless the bag and application explicitly say hey this other app can talk to me so we're gonna need course to take care of that and then we need that env that envs because we're gonna be passing in some configuration so when you have that env then you can use a dot env file where you can load that file up like you load up the values in that file and that's what we're going to put over all of our database configuration so we need to be able to load this file into the node context so that node can read these properties or these parameters that we're going to put inside of this configuration file and then we need express so that we don't have to build the server using regular node which is going to be like really verbose so we don't want to do that so we're going to be using express and i'm going to use another one called ips so that i can see the ip address of the server but you don't need to put that one you can just omit it if you want and then we need the mysql i'm gonna use the two version so mysql2 make sure you specify that version as well so not really a lot of dependencies and the only ones that we really need are really the express and mysql too but of course if you're gonna you know be using this application with a friend application then you're gonna need course and then that env for convenience ip for convenience so i'm gonna press enter and that's gonna go ahead and install all these dependencies and i'll come back when this is over oh never mind it's already over and now if we can take a look at the package.json file you can see that we have this dependencies property now which is an object and then we have all of our dependencies with whatever the latest version is so now we have to install some uh type definitions because we're working with typescript so we need to have code completion and to do this i'm gonna do uh up arrow key and then i'm gonna do dash d because those are dev dependencies and i need to do it type forward slash course for course and i don't need to do it for that env so we're gonna say type forward slash actually this supposed to be types so let's make sure i change this so types and then types and then express and we also need to do the same here so at types forward slash ip do it for sql so at and then we're gonna do types forward slash mysql and then we're gonna need nodemon so put that in there and we need ts node so ts dash nodes and then we're gonna undo typescript as well so typescript uh i don't know why this is doing this so let me clear the screen oh there we go so we're gonna do typescript as well because you know just in case that they don't have it i need to delete this so i can understand what's going on here so ts node space type script and then ctrl l all right i don't know where this is going i think if i run it it'll be fine because i typed it incorrectly but i don't know why the command line is doing this but anyway we need to install those dev dependencies so i'm gonna go ahead and press enter all right i'm gonna let this go hopefully it doesn't take too long and i got an error here and the error is for mysql type so i'm gonna go ahead and make this full screen because i want to see what's going on here and then i think we need to change this to something else so we have to say here just types so change this and then mysql 2. i don't think we have to put the add in the beginning of that so let's go ahead and press enter and see what happens this time all right everything seems to work this time so make sure you remove the add types in front of the mysql 2 version whenever you're installing the dev dependencies otherwise it's not going to work because it doesn't use the add which is a little bit weird because everything else use the ed type so they probably need to make this a standard but anyways all right so let's go back to the packs.json file and let's scroll down so we know we have all of the actual dependencies that we need so let's scroll down make sure we have the types for course the types for express the types for ip types for mysql too and then we have nodemon ts node and then typescript so we have all of the dependencies that we need to build this application and i think that's all we need to do for this file for now so at this point we should be ready to get started and then start building the application and that would be another good time to take a break because we're gonna be actually coding and everything so if you wanna go grab a coffee or whatever go ahead and do that and then come back and we're gonna continue so i'm gonna go ahead and open the panel and i'm gonna collapse this so we have all the files that we should have at this point so the config file the packet.json the package like that json and then we have the node modules because it also installed all of these dependencies and dev dependencies that we have in the packet.json file so let's close everything here so now what i want to do is to create the index file so i'm going to go here and then do index that let's do ts okay so we have the index file and i also need to create the src folder so i'm going to do src so remember everything is going to go inside of the src folder so i'm gonna grab this and move it over to the src folder okay so we're not gonna have everything hanging out out here because we have configurations and node modules or whatnot so we need to organize things a little bit which is why we're putting this index file inside of this source folder because that's where all of the ts files are going to go so inside of this source folder i'm not going to go ahead and create the distribution folder or the this folder so if we go back here remember we have this folder that we're talking about here when we compile everything for the first time then this should be created so i don't need to manually create it here but feel free to do that if you want to what i want to do just to test this out is to just put a console.log and then we're going to pass in a message here and you know that message is going to be hello world i'm going to go ahead and just console.log that just so we can test this out so we can make sure that all the configurations are working and that's also another reason i didn't you know create the distribution folder manually because i want to see everything in action so now if i run the uh so this script so the build it should go ahead and compile everything and then put the js version of this index file inside of a new folder that's gonna create which is gonna be the distribution folder and inside of this folder we should have the index.js that we're pointing to here as you can see when we run the broad script so i'm gonna go ahead and bring back my terminal and i'm gonna go ahead and clear the screen so if i do npm run and then pass in the script name so if i scroll down a little bit you see the script that we want to run is the start build so i'm going to go ahead and type start build okay so this is go ahead and run this command and then build the project also make sure you're inside of your project because it's going to go ahead and look for you know the ts config file the json file and it's not going to find it so if i go ahead and run this okay so it looks like it ran successfully and if you look over here you can see that now we have the distribution folder and if we look inside of it we should see the index.js file and you can see it right here using javascript instead of typescript so we know that everything is working properly and i can go ahead and get rid of this file all together i just wanted to demonstrate everything so we know that our configuration is working so now we can start working on the actual node.js application and build our server and then start coding you

Channel: Get Arrays

Views: 5,250

Keywords: TypeScript, NodeJs, Angular, Docker, docker-compose, AWS

Id: hfxIb6lzIKs

Length: 200min 30sec (12030 seconds)

Published: Thu Feb 03 2022