TypeScript Tutorial For JavaScript Developers - TypeScript Basics

hey guys how's it going i'm back here with another video and today i decided to make a kind of like a crash course a beginner's tutorial however i'm gonna deal with a bunch of really important stuff which is going to prepare you guys if you guys are interested in learning typescript if you already have the knowledge of javascript so basically i believe that in order to learn typescript it is really important that you already know javascript previously it is totally not necessary however i believe it is the best way of learning it it's my personal experience it's how i learned it and i believe that typescript will soon overtake javascript just because it is extremely important in the in the business world right so in large scale projects it is extremely important to use typescript so i'm going to teach you guys is basically i have some examples here three examples to be exact of three different functions and i'm going to show to you guys first the version of it in javascript as you can see right here this is the first one and then i'm going to show you guys how to convert that function to typescript as you can see currently i have a javascript file it's called index.js however as i show the example for typescript i'm going to change it to index.ts which is the extension for typescript at the end i'll also show you guys how to set up typescript and some more useful situations like a react application or a node.js backend and you can start working with typescript after we finish the video so the first thing we have here is a very simple function it is called increment the thing it does is basically you can see it's it receives a value called counter vol and it just returns that value plus one for example if i wanted to create a variable called counter and i set it equal to increment of 10 an increment will receive a value of 10 as counter vol and it would return 11 because 10 plus 1 so counter would be equal to 11 because this is the return statement of the increment function so that should be fine in normal javascript however it leads to many issues for example imagine if we don't receive a number here imagine if we receive a string javascript doesn't know what is you can see right here it said it says parameter counterval can be anything we don't know exactly what it is so how can i add plus one to a variable that i don't know the type right so that's where typescript comes in i'm going to show you guys now the version and typescript and explain what are the changes we made okay guys as you can see right here the first thing you notice is that i changed the index the name of the file to index.ts as you can see right here because it's typescript as i mentioned and here is the typescript version of this function and this logic and the main changes here is that we had to define for every variable that we created we had to define the type so in typescript if you create a variable for example um name imagine that's a variable right and i set it equal to my name here pedro you can't do this because typescript automatically requires you to give it a type the different types that it might have as you can see it's assuming it is string that's what javascript does it assumes its string however with typescript you have to define it immediately and to define the type of a variable you can come right here and give it the type so string for example and actually this is giving me an error because we already have another name variable in this application that i'm going to show you guys later but for example if i called this any other thing like first name you can see that we just created a variable which is a string and we defined that it is a string before we actually set it equal to the value that it has we can do the same thing with for example if i create a constant instead of a variable um called age of my parents i don't know why it came up with that but imagine this is a number right so i can say number is equal to i'm just going to put a random number um 24 they're not 24 but i'm just going to put this you can see that in javascript we didn't need to put this number thing over here we just added it to be equal to 24 however since this is typescript you have to do it this way there's all the different types there's boolean there's um number there's string as i mentioned there's more to come and i'm going to show you guys exactly how to work with those but you can see that the main changes we made to this function are related to this that i just talked about because as you can see right here when you create a function called increment for example i set it equal and on at the top here it has the arguments and the only argument it has is counter vol which is a number so for every argument you put in a function you have to define its type for example imagine if this function also took um i don't know a book title i know it has nothing to do with the with a function but it took a book title then you would have to define that it is a string for example right so that's exactly what you do when you're working with functions there's still more things that you need to do with the function however we're going to see that in the next in the next example but as you can see right here we know that this is going to return a number because its counter vol is a number a number plus a number which is one it always returns a number so when i create the counter variable down here to to to get the value i also have to define it as a number as you can see so this over here will be a number equal to 11 because we passed 10 here similar to the last example so now let's go to the next example which will be in javascript okay guys i'm back and i actually decided to add a new example now it's going to be four examples because i really need to show you guys this so imagine this very simple piece of logic in javascript right you can see the files back in javascript i'm going to be alternating between them just to show you guys the example but for example in this file the only thing it does it creates an array a list called programming languages it says it's equal to um like three an array of three elements java typescript and python and it also pushes a new element at the end called golang which is also a language and at the end it only console logs programming languages so what would be the issue with this in typescript well if you remember the last example the main issue with this is that we created a variable without defining its type so how do we actually define a type for an array as you can see right here it already says because javascript works this way it automatically does it for you but with typescript you are obligated to do it yourself so what we want is a an array of string which is this syntax right here i'm going to convert it to typescript and show you guys so the only difference would be as you can see here in the typescript version is that we now define it as a an array of strings and if this was like a bunch of numbers it would be an array of numbers like this so the idea is you put the type of the elements so string and you put here the array the empty bracket to define that it is an array so that's how you actually work with arrays in typescript okay guys so this next example is a little bit more complicated however it exemplifies one of the most important parts of typescript and as you can see right here um in this javascript file i created a base a basic function which just fetches data from an api if you've never worked with an api before then this wouldn't be as applicable to you however apis are extremely useful in various situations and it is a fundamental part of typescript and javascript as well so what i did here is i just created a function called fetch data which takes an url for the api and it returns the like the data returned from the fetch right so we use the fetch function in javascript and we pass the url to make the api call then we have a promise and we return the response.json which is the data so basically you imagine that this is responding that this is returning a promise right and we can get the data by just saying const data equal to fetch and i can pass the url here fetch data is the function we just created so i can pass the url here so imagine i passed this ap this url myawesomeapi.com data subscribe this doesn't exist but imagine it existed and we're making this api call then if i imagine that this api data was the data for a person right and the data we returned would be data.name data.email data.age and data. is married imagine that we can say that because the data returned by the api is an object containing this properties right a property called name a property.called email and a property called age and is married this works perfectly in javascript however it only works perfectly if we assume that we already that we're getting uh in the return from the api an object containing these properties however most times we can't we can't just uh assume that we can't leave for luck because imagine if an api changes imagine all the things that can happen you need to be secure of the data you're receiving so you actually have to define what is a tape what is the data you're receiving so that's what we're going to be doing in typescript so this is the version of the function in typescript and i know it might seem a little very confusing if you've never worked with typescript before however i'm going to dissect exactly what is happening here so remember when i said that we need to define how our data is going to be returned so for every function you need to add at the end here to call it like two dots and the value it's returning usually it will return void meaning that we're not returning anything in our function but if it is we have to put the type in this case we are returning a promise as you can see right here and the data that will be included in that promise will be an object containing information about the user so what we can do is basically we can create an interface called i user which has the properties name which is a string email which is a string age which is a number and is married which is a boolean and we can say that the data we are receiving from this function so the data that is returned from this function is of this schema right here you have to do this whenever you have an object for example if i wanted to create an object called i'm just going to create an object called um i don't know typescript let's create this object actually let me just call it typescript like this it is an object containing information about typescript what information can we give to typescript well let's give it a name the name of typescript is typescript as we all know um let's give a boolean called awesome and let's ask if it is awesome or not so it is true and for now let's just leave it like this this is the object so we haven't like we haven't defined how what this object is and in typescript for every object you need to create an interface so for example over here if i create an interface called programming i usually like to call interfaces starting with an i and then the name of the interface so programming language this is an interface which is going to define all the properties we can have related to a programming language object right so the first property we want is name which is a string the second one is basically we want the word awesome we want to know if it is awesome or not and it is a boolean so when we say something like typescript we have to define its type so what we do is we define it as an i programming language and now it knows that if i if i remove this you'll see that it already knows that it needs a name so because it's getting it from the interface that we created above so we can just pass a name as i mentioned typescript um and if i want to pass an awesome property you can see that it's i didn't pass awesome yet so that's why it has a red squiggly line because it knows that the schema for this object needs an awesome property which is a boolean so if i add a boolean here called awesome equals to true then the error removes and something that is also important imagine if we actually wanted to add something else like the age of the programming language but it's a number but we don't want it to be a like a required field so you can see currently this is giving me a red squiggly line because i'm currently um i'm not adding the h here for this object however if we wanted to make optional what we can do is we can just put a question mark here and it knows that it is optional so we can if we wanted to add age we could and you can see it is optional it appears over here however it is not necessary and we could do this for any language we want we just created the object i can call this javas java for example then give it a name and it has the same schema as before the same interface so this is just a small example of how interfaces and objects work and the reason why we need those is because we're saying that our function is returning a promise which has an object containing this interface right here so we know that the user will have a name an email an age and the property is married not to mention that as we've seen before we need to define the variable api url which is the argument to be a string because that's how we return and now if we create a variable like this so i want to create a variable called user it's going to be an i user because that's the property we want and it's going to be equal to fetch data something like um api url so we're getting the data from the api we know it's going to be a a user we're just putting a random example here so we know that this is going to be um this is a user right however you can see that it's saying um type promise you a user is missing the following properties because we have to pass those properties in order for this to be correct right so we can say something like user dot age or user dot name as you can see it is taking those properties from the user interface that we created above and this is a really important thing in typescript because working with objects is something extremely important when you're working with front-end or back-end code and you have to be you have to define those immediately when you work with them so let's go to the next example so this is the next example i'm going to explain to you guys what this is i didn't change it to typescript to javascript however this is javascript code because you can see we are not defining anything imagine that we want to create a function called surf cheese the only thing it does is it takes a cheese type and it takes up some servings like this is an amount of servings this is a number um and we just want to console log the message you want um i don't know three servings i'm gonna add servings here of the type of cheese so we can say cheese type right so what can we do to change this to typescript because we have to define this kind of stuff but there is a limited amount of types of cheeses so how do we define all the different types of cheese that we can choose between those so how do we do that i'm going to show you guys in typescript so in typescript you have this enum data type which doesn't exist in javascript which exists in several different languages like java and what it does is basically you can define inside of it different options in kind of like a enumeration it's an enumerator which basically you can define different options that something can be right i don't know how to explain that clearer but basically we know that there's different types of cheeses so we can put here all the different types that we want it to be and when we create the function surf cheese we can say that the cheese type will have the prop we'll have the type cheese meaning that it can only be one of these options so for example if i came here and said i wanted to call the serv cheese function and i wanted to pass a cheese type i couldn't pass something like what is another american cheese i don't even know if that's a cheese because it's not a cheese type it's giving me an error as you can see right here and i also need to pass another thing over here which is the amount of servings i'm going to pass three but you can see that it's giving me some error for this because this over here is not part you can see argument of type american cheese is not assignable to parameter of type cheese because it's not one of the options what we can do instead is we can just directly come here and say cheese we can grab the cheese and numerator cheese dot chatter or dot blue world we can just grab one of the options blue mode sorry and this would work perfectly however there's another thing that is important you can see right here that this function doesn't return anything it just console logs some message so if you want to create a function that console logs something what you can do is you can just say that the function returns void which basically means it's not returning anything it's just you like the logic inside of it is purely done on its own you don't need to return anything so that's basically it i'm gonna show you guys now a really quick example on how to set up the typescript and react okay guys so as you can see right here i have uh opened up to a really simple folder in vs code it has nothing inside of it and what i want to do is i want to run some commands to create a react application using typescript so how do i do that well i basically just opened up my terminal as you can see and i run the normal command for creating a react application npx create react um react let me push this a bit create react app as you can see right here app but at the end i also need to put the name of the application let me call it um typescript example that's the name of the file folder that i'm going to create my project in and at the end i need to pass a flare that flare will basically define that this is a typescript project in order to do that i can pass two dashes as you can see two to hyphens and then put template and then typescript so i want to say that i want to grab the typescript template and i want to press enter and this should start creating our react application and we'll automatically install everything related to typescript create all of our files instead of jsx it will be tsx which is the typescript version of a react like jsx file and everything will start being created as you can see right here and we can even already see the src all of our files are currently being either like tsx or ts files as you can see so it means everything is being set up for typescript and that's basically it this is how you create a typescript um application in react and if you guys want i can make a full tutorial on react on how to use typescript and react because there are some small stuff in it that it is important to understand like how to define event types how to do a lot of different stuff how to define types for um components for i don't know states that kind of stuff so i can definitely make a video on it but for now that's basically it i really hope you guys enjoyed this video if you enjoyed it please leave a like down below next subscribe because i'm posting every single day and i really appreciate the support and i see you guys [Music]

Channel: PedroTech

Views: 4,886

Keywords: crud, css, javascript, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, learn typescript, typescript vs javascript, typescript tutorial, typescript beginner, typescript basics, typescript in 100 seconds, fireship, codevolution, typescript react, typescript course, learn typescript for react, learn typescript for beginners, academind

Id: -w1i-gARuJs

Length: 19min 14sec (1154 seconds)

Published: Fri Dec 11 2020