React with TypeScript Crash Course

Hello everybody, welcome back to the channel and welcome to a brand new tutorial. In this tutorial video, we are going to cover how to use react in conjunction with typescript. Now for this tutorial. I do expect you to know a little bit about react, but you can probably get away with not knowing any typescript. So if you want to learn how to use react with typescript in conjunction, then well, continue watching this video. Now, before we start, let's actually discuss what typescript even is. So typescript is a language that is built on top of javascript, and it is actually known as a superset of javascript, and it was built and developed by microsoft. Now, what does typescript allow us to do? Well, it allows us to add type definitions, and let me kind of explain to you what this is with an example. So, over here, i have this variable right over here, so we can see here that it says: hey, let name is equal to lathe harp, which is my name. Now, in. This is in typical javascript and in typescript. Actually, this is completely valid. But what typescript allows us to do is to add a type definition right over here, and it would look something like this, and essentially what we are doing here is we are saying that, hey, this name is a string and over here then we are defining what the name is.

So, right, here we are defining the type of this variable and that, right, there is a. What type definitions are? Now, why are type definitions so valuable? Well, they're really valuable, because what if, in the future, i go ahead and i want to use this variable? So i want to go ahead and use this variable and for some odd reason, for some odd reason, i think that this variable- let me increase the size of this. You know what? Let's actually move out of the the box, let's add another text right over here. So i want to use this variable and, for some odd reason, i think that this variable is an object. So i, maybe, i want to access the first name. So i'm like name dot, first name, and well, this is completely invalid. Now, in javascript, essentially, what we would have to do is run our application, see that it breaks, and then we would be like, oh, okay, something's broken, what is it?

And then we would basically figure out that, oh, this is not an object, this is actually just a string, however, in typescript, because it knows the type of the name and it's a string, it will tell you right away that, hey, buddy, there's no dot, there's no dot underscore first name, or first name underscore, or first underscore name, basically property on this name variable, because this is a string and not an object. So it tells you right there in development that, hey, something is going wrong. So, with that being said, what are some of the benefits that you get with typescript? Well, you get a lot of benefits, and that one benefit that i just talked about is catching errors early in development.

So if we define strict types throughout our application, essentially if we ever do some sort of mismatch and we ever kind of get confused, like i did in the last section, well, typescript is going to tell us right away: hey, something is wrong. This variable, you're using it incorrectly, because the type definition is defined in this manner. So it allows us to catch errors very easy in development, whereas if we use just typical javascript, you would actually have to run the application, see that our application is breaking and then we would have to find and dig exactly where our application is breaking. So that is one thing, and another thing is that it serves as documentation. So it serves as documentation now, essentially, when we define types, especially in a react application with many pages and components.

Essentially, we might get a little bit confused as to what are the types that are involved for a certain prop or a certain state or whatever, especially if you're a new developer onto a new team. Well, the easiest thing that you can possibly do is just look at the type definitions for that certain prop and then you would be okay, i would have a great understanding of what this component, what this application, is trying to do. So these are two of the many benefits that essentially allow us that typescripts gives us when building not just a react application but any kind of application that uses their type definitions. So that is a quick introduction to typescript. If you still are a little unsure about typescript, don't worry.

Once we get into the crash course itself and coding it out, you're going to be very, very comfortable now. I always like to teach things by building applications because, at the end of the day, we're always just software engineers building applications and we're just going to build this application right over here. So this is a very simple react application, but we will build it with typescript. So over here, this is just a list of people that i'm going to invite to my party.

So people invited to my party. So over here we have their picture, their name, their age and any notes, if, if needed. So over here this is one, over here this is another, and over here we have a form if we want to add another individual. So let's say i want to add steph curry. So let's go ahead and add steph curry. I'm not sure how old he is, let's say 32.. Let's go grab just a random image. Let's just go stefan, stefan curry. And then let's, he's 33, not 32, so it was pretty close. So let's just pick. Let's pick this image right here and let's just copy his image address and let's go here, let's paste that in there and any notes. He is a good shooter.

Actually, you know what? Compared to me, he's really an okay shooter. There we go, we can add him in. So it's a very, very simple application. You can't delete it, you can't update it. It's a relatively simple application and that's because i don't want to focus on the react side of things. I really want to focus on the typescript working with react side of things. So that's why it's a very simple application. We're going to build this application from scratch. Now, if you ever get stuck when building this application, feel free to go to my github page. It is a private repo at the moment, but at the moment of release i will change it to public. So just go to a hard blade 7, which is my, my user, and then over here, this is the rea.

This is the repo: react with typescript, crash course. So if you ever get stuck, then please go ahead. Either figure, look, look into the directories and see where you're stuck at, or you can clone it or fork it or whatever it is that you want. All right, cool. So that is pretty much it. In the next section we are going to start up our react application, but start it up with typescript. To start our application, we first need to create a react application. I do expect you to know how to create a react app.

So typically, when you want to create a normal react application, you would do something like npx inside of your terminal, of course, npx- create react app, and then you would give that app a name. So you may be something like react with typescript. However, if we are creating a react application that is utilizing typescript, we have to essentially provide it with a different template, and this is going to be done through the dash dash template flag over here, and then we do a space and we specify the template that we want to use. Well, we want to use the typescript template. So essentially, at this point, what's going to happen is it's going to create a react app, but it is going to use the typescript template to create it and that way it inherently utilizes typescript within the react application. So go ahead, cd into whatever directory you want to create this app into and run this exact same command. Now i have already- i've already created my react app, so i'm not going to run this. And the reason why i'm not going to run it is it would take five minutes to run, but once you run it, just cd into it. So i called it react with typescript. So just cd into this application. So cd into it again. I'm not going to do that because i didn't create the app and then just do an npm start. Once you cd into that react application, do it npm start and you should run. You should see that application running on localhost 3000.. All right, so that is pretty much all we have to do to create our app. Now, once we create our app again, this is the final version. You should see something that looks a little something like this right over here. All right, cool.

So let's actually start discussing the actual folder. So go into the folder, open it up into your text editor- any text editor that you like. I am using visual studio code to run mine and you can see here that, okay, it looks like a typical react application. Actually, looking at this appjs, this looks exactly like a typical react application. However, once you open the source folders- and let me just zoom in a little bit just for clarity- once you open the source folders, you notice that this is not appjs or appjsx. This is actually app apptsx, and this is essentially the extension that is absolutely needed if we want to use typescript with react. So it is not going to be javascript, is going to be tsx, so not a java jsx, tsx. You can see here we have the typescript kind of logo. All right, cool. So right now again, you can see here that we have a tsx file, so this does utilize typescript. However, it looks exactly the same as a typical react application that is just using javascript. So it seems like: okay, what is really the difference? If i go over here, this also looks pretty much the same. What is the difference? Well, we're going to get to the big difference when we actually start developing that app. So let's get on with it in the next section. So, now that we have our react app up and running and open in our text editor, let's actually start dealing with how typing works when dealing with state in react.

So let's actually go ahead and let's just do something really quickly. Let's go ahead and let's import the use state hook. Remember, the use date hook is responsible for storing data inside of a component. So let's go ahead and let's import that in and let's just do something really, really quick. So let's go over here and let's just set some number. So we have a number and then we have the function set number and then this is going to be use state and initially we're going to set this number equal to five. So right now, this looks like well typical javascript. So this is this is nothing special. Let's also go ahead and let's just create a function and then we're gonna call this function change number. So this function is called change number and simply all this number is going to do is it's going to set the number to another number, so 10.. There we go, everything is completely fine. All right. Now what if? What if, for some odd reason, we decided to change the number not to the integer 10 but the string 10..

There we go we are. We get some sort of squiggly line right over here and that, right there is the power of typescript. That is the whole purpose of typescript. Now, why are we getting that squiggly line? Let's actually hover over it and we can see here the reason why we're getting that squiggly line. It says: argument of type string is not assignable to parameter of type well, number. And basically what's going on here is when we set out, when we set our state, we passed in this number right over here, and typescript is smart enough to basically infer that, hey, this right here is going to be of type number, so this right here is going to be of type number.

Now, if we go ahead and we change this to type string, well, typescript is not going to be happy with us and it's going to say, hey, something is wrong here, you got to go ahead and fix it. Now, for this little example, it seems like it's okay. Typescript is not really doing anything. I can catch that really quickly. But with larger applications, especially when we're passing down props and state and all things of that nature, these type checkings are really really important and allow us to catch errors really really fast.

So that is typically great. So let's actually go ahead and let's kind of discuss the type inference over here. So again, typescript inferred that, hey, this is going to be a number. However, what if we wanted it to either be a number or a string? Well, what we could do is we could essentially declare the type so we can override the, the inference that it made, like this. So we would do these kind of a closed, you know, triangle brackets right in between the use date and the number, and then we would define the type. So we would define number. You can see here this is acting the exact same way. It's? It's basically saying that, hey, this is a number. And now if we wanted to say number or string, well, we would just have one pipe and then we would say string. And now you can see here, now it's completely happy. So you can see that this right here is type number or or type string or number. So it's completely happy now if i go ahead and change this to some sort of boolean for some reason. Now it's unhappy. Now i can actually go ahead and do boolean if i wanted to. But i mean, now it's getting a little crazy and typically what we want to do is: we want to just have number. Now, with something like this, you really don't have to kind of declare the type. You could just let typescript infer it. However, you know, if you want to have a one type or another type, that's when you would actually have to go ahead and declare it. But in these cases it's actually best to go ahead and let typescript infer that this is going to be a number and always stay a number, all right. So now that we kind of got that out of the way, let's go ahead and let's kind of work on this application over here. So you can see here that this is: each card really contains a bunch of data and that data is going to be lived inside of, well, the state and essentially this state over here. Let's actually keep it in the app file folder right over here, the app file.

So let's actually go ahead and let's do this right now. So let's, let's just get rid of all of these components. So anything under the the div right over here. Let's just get rid of that and let's just put an h1, and this h1 is going to be well, people invited to our party. So remember, this is the kind of complete application. This is the application that we're working on, so let's go ahead and let's just paste that in there and we should get something like this. All right, cool. So now let's go ahead and let us use this use state hook to essentially create the state for each card.

Now, for each card, we have an image which is going to be a url, and this is a string, a name that is a string, an age, that is a number, and then an optional notes field that, well, is, a is a string. So let's go ahead over here and let's do this.

So let's go over here and let's do const and we're going to call this people and then set people, and then we're going to do use state, and then inside let's have a kind of an initial setting of: well, an array of objects. So let's do an array of objects. Well, let's go over here and let's do name. Let's put the name of lebron james and let's do a url of- well, we'll just keep it empty because i don't know what the url is, and then let's do an age of 36, and then let us do a note of: well, what note do i have here, this note right here, let's copy that. So let's do a note of that. So now, actually, if i hover over this, well, this is great because you can see here that it actually defined the type for me right away. So it's saying that, hey, people, is of type, an array of objects. So over here we have an object and this is an array, right here, defining that this is going to be an array of objects.

And then within the object we have name- that is a string, url, that is a string, age, that is a number, and then notes- that is a string. So let's actually go ahead and let's actually add another individual. So let's actually do that. Now, remember that the, that the note itself, is optional. We don't have to specify the note. So let's go ahead and let's add another individual. So let's go ahead here and add, let's add kobe bryant, and then let's get rid of this note right here and okay. So it seems like everything is working well, but now when i hover over it, you can see that the type is a little bit more complicated. We have basically the. The type is: it could either be essentially an object that has an array of objects with name, url, age and note, or name, url, age and note, but this right here has the question mark. So this is could possibly be undefined.

Now, this is kind of a complicated type, so we probably really don't kind of want this. But you know what, there we go. It's actually kind of inferring everything for us. Now, if i were to, let's say, i want to go ahead and map through this, so if i go ahead and map through, let's actually tabulate this, let's go ahead, i want to map through people, so i want to map through people. So for each person, now what i can do is i can go ahead and i can access, well, dot, oops, i can go ahead and access dot, age, name, note or url. However, one thing i can't do is access, well, something that i haven't defined in the types. You can see here that it goes ahead and yells at me. It's saying that, hey, this is not defined in the types and this is not a valid property in this object because, again, it is not defined here anywhere. So this is what's great about typescript. Now, if i go back to something like age. Well, that works perfectly fine. Also, i can't do something like: well, change the age to a string of 46. At that point again it yells at me saying that, hey, this is type number, not type string. All right, so this is really really good. Now, what if you kind of have a problem at this point? You don't want to start off with, basically, a bunch of pre-populated data? What if you wanted to start off with, well, an empty array? So let's actually move back here, let's actually get this back right now. And so let's say, let's say this right now. Let's say you want to start off with an empty array. You can see that you have a problem because at this point typescript can't infer exactly what the type of the state is going to be, because, well, it's completely empty. So it has no idea that this is going to be an array of objects with a property of age in there. It could be an array of strings, it could be array of numbers, it could be an array of objects.

So it has no idea. So at that point, essentially, what we're going to have to do is we have to define the types manually. So just to kind of quickly illustrate this. When i hover over this, you can see here that this is type of never, basically saying that it has no idea what what is in here. It could be a string, could be a number, could be whatever. It just has no idea. So at this point, what we want to do is we actually want to define the type right in here. Now we could go ahead and just define an array of objects with, essentially, the age that is going to be, let's say, a number. We could do that and you can see here that it's happy, and then we could continue on and we can say something like: the name is going to be going to be a string again. Now we can go ahead and access the name. That's completely fine. However, you know, typically in a application we don't define a complicated state right inside of the kind of these triangle brackets. Essentially, the way that we would do it is we would create something known as an interface and essentially what this interface is going to do- and i like to call this interface, i state- is going to define a certain type. So over here i'm going to define the people type and this is going to be an array of objects, and so to define that is going to be an object- well, i specified the object- and then to define that it's going to be an array of objects, while i'll define the brackets right over here, the square brackets. Now, inside the object, i expect a string or the name. That is a string. I also expect an age- that is a number. I also expect a url- that is a string. And i also expect a note or notes. That is a string. However, this field is optional, so we can define that. It is optional with the question mark right over here. So, as you can see here that this can be either a string or undefined, that's completely fine.

Now, what we can do now is over here we can say i state- now you can see here that it's still failing, because now we need the i state dot, people. So essentially we can access that with another set of square brackets, and then we can say people, and there we go. Now it is completely happy with us. So now, essentially, i can go ahead and i can say age, and it's happy, and it even autofills, and if i ever make a mistake and add an extra e, for some reason, it catches that error. I can also access the url, which is terrific, and i can also access the optional note you can see here. Even it says that this is potentially optional. All right, so that is terrific and that is really how we deal with state in a react application using typescript.

Now let's say we have all of this data. We have all of this data and essentially now what we want to do is we want to render those components, but we don't want to render them inside of the parent, we don't want to render them inside of the apptsx. Instead, what we want to do is we want to pass that data down to a child component and have it be responsible for rendering it. How would we do that with typescript? Well, we'll get to that in the next section. So now that we have defined the state inside of our apptx component and we have defined the type definition, the next step is to use that state to go ahead and actually render those cards. So these cards over here. Now again, we essentially decided that what we want to do is we want to render those cards in a separate component. We don't want to render them over here.

So essentially, what we want to do is we want to basically pass the state to that component and have it be responsible for rendering it. So let's actually go ahead and create that component. So in the source directory let's create a new folder and we're going to call this components, and then in the components folder let's create a list, dot, tsx.

So essentially this is going to take in all of the basically that array of objects and render them as a list to render these cards right over here. So let's go ahead and let's just create a typical functional react component. So let's just import, let's import react. So it's going to import react from react. And then let's create a typical functional component. So let's do const list and then over here it's going to return some jsx. For now let's say that we want it to return just a simple div, and then in this div it's going to say: i am, i am a list.

And then over here what we are going to do is we are going to export default this list. So this is just the typical functional component. So inside of our apptsx what we can do now is we can just do a quick import. So let's import list from components, dot slash, components, slash list- and let's go ahead and render it right over here. So we're going to render the list right here. So if i save this, you can see here that i actually get that component rendering. Okay, great, so now let's go ahead and let's pass this piece of information into this list component. And now, remember, in react we pass data through props. So to do that, we can basically say people, and then, well, people, so we're going to call the prop people, we're going to pass in the state of people. However, as you can see, here we're getting a typescript error and essentially the error is saying that, hey, there's okay, this type is not defined anywhere in our component. Right now, the list is not expecting any sort of props because we haven't defined the type definitions for the props for this component. So it's basically expecting: hey, i shouldn't get any props, and that's essentially why we're getting this error. The list component is expecting: hey, i'm not getting any props, but we're passing in props of people. So that is the problem that is happening. So how do we solve this problem? Well, we solve this problem in a very similar manner to the way that we solve this problem.

We can basically define an interface defining the type of the prop and then we can basically set it in this component. Now this interface is going to look exactly the same as this, because we're just passing that component down, so i can just simply copy it and then we can just change this to eye props instead. And now over here, what we can say is, okay, well, the props it has, well, the type of eye props. So it's going to have basically a, a people object. And then this is this: this people object is going to have an array of objects with these particular types. So if i save this and then i go ahead over here and i save this again, you can see that the error is completely gone. It's actually completely happy. Now, now, if i go ahead and i remove this, though, you can see that, hey, now it's unhappy. So, essentially, by adding this interface right over here, by adding this interface, what it's going to do is it's going to basically check for, well, the props inside of here. So let's let's say, i go ahead and i destructure this. I can destructure out people, that's fine, but i can't destructure out something that doesn't exist.

So it does a lot of type checking in the child itself, but it also does type checking in the parent and saying that, hey, you got to go ahead and actually pass in the people prop. So let's go ahead and do that. So there we go. That is really really simple and that's typically how things are done and how type definitions are are defined when passing props. Now, one thing that we could possibly do instead of this approach is essentially be a little bit more specific as to what we are doing here with the types. So instead of actually passing the type right here, defining the prop, what we could possibly do is actually define the type of this element right over here so we can say that this is of type react dot functional component and it contains the props of eye props.

So, right here, this is a lot more specific because now, right now, we're defining that, hey, this is a functional component. Before this, before this, it actually had no idea what this was. Typescript had no idea what this was. They just thought it was a function that returned some jsx. But when we said that this is a react functional component with the types of eye props, now it has a lot more detail as to what this is. So this ultimately really achieves this.

The same thing. I can still destructure out and take people. I can't take anything else that doesn't exist and, similarly, over here, the app component is completely happy. So there we go. That is how we pass props with typescript and react. In the next section, we're actually going to go ahead and create a function that renders these cards. So now that we have defined the type of the prop that the list component is going to have, let's actually iterate through this people array and actually render these cards right over here. Now to do this, as you can see, there are a little bit of sty styles involved with these components. So let's actually just quickly go to my github page and let's go to the source directory and then let's go to the app dot css and then let's copy everything right over here, so under the dot list, all the way here.

So these, these are just some basic styles that i'm using for our app. So let's go ahead and let's do that. So let's go over here into the appcss and let's just paste these styles in. These are the only styles that we need. All right, terrific. So now let's go over here and let's go ahead and render those components. Now. The first thing that i'm going to do is i'm going to go to the appcss and actually just add a default object, so we can at least render one without having to create it. So let's go over here and let's do name, and we'll do name of lebron james. Let's do url, so the url and this url. We'll just leave it empty for now, and then let's go ahead and let us do a. Let's also do an age of 36, and then the last thing that we're going to do is a note. Let's actually copy the note that i have over here. So let's go over here and then let's also just copy an image. Let's actually copy this particular image, just copy this image address. You can pick any image from the internet that you want. So let's go ahead, and now we have at least one kind of default inside of our array. Now, what's great about this, is it? It's basically following these types and it's checking these types. So if i ever make a mistake, you can see here that it tells me. All right, so now we want to basically render this component. Well, let's do that right now. So one thing that we could possibly do is change this to a list, because essentially, we can basically consider this a list.

So this concerns us- to an unordered list, and one thing that we can do is we can do something like over here: people dot, people dot map, and then we can go: oops, peoplemap. And then we can go ahead and basically map through every single person so we can do person, and then for each person we can just return some jsx. So we can go ahead and let's return this jsx. Let's actually just return person dot name, so personname, and technically this will definitely work. So let's go ahead and refresh this. You can see here that we see lebron james. However, when it comes to this, i really don't like having this kind of map functionality within the core jsx right over here. Personally, what i like to do is i like to define a function that essentially returns the jsx and then i just call that function inside of here instead. So let's actually do that right now, and that will actually allow us to learn a little bit about how we deal with functions, with typescript. So let's create a function called render list, render list and this is going to be an arrow function and essentially, over here, we're going to do pretty much the exact same thing we're going to do.

We're going to return people dot map, so we're going to return peoplemap and then, over here, then we're going to return. Over here we're going to get grab, basically each element, call it person, and then what we're going to return is: we're going to return a list and essentially, this list is going to have a class name of list. Remember, these are the classes that you have, that you have copied and pasted right over here, and then over inside we're going to have some other things. So, let's, let's create a div with a class name of list header and then inside of this div we're going to store the image itself, so the image itself. This is going to have a class name of list image, and then the, the actual source is going to be: well, person dot url, so personurl, and then we're going to have an h2 tag and this is going to be the actual person dot name, and then, outside of this div, then we can actually go ahead and have a p tag. So let's have a p tag and we can say person dot age, and we can say years old, because the age is years, and then the last thing we can do is we can have a note. So over here we can have another p tag, this one, we will give a class of list note, and then last thing is well, person dot notes. So there we go. That is terrific. Now, again, i i feel like i'm saying the same thing over and over again, but if we somehow made a mistake instead here- maybe we thought that this was actually called image instead of url- typescript is going to tell us because we have defined the type definitions right over here. So that is terrific. So let's actually go ahead and let's do the url. Now, one thing that we could possibly do now is we can go ahead and actually use this component and actually just call it inside of our ul tags and there we go. That is pretty much it. So if i refresh this, nothing happens for some reason. Let's see why. Why does nothing happen? Okay, this actually kind of symbolizes a kind of a good reason why this is not working. So, essentially, what is happening here is: i am really not returning jsx elements, and typescript hasn't caught this yet. So the so with. When it comes to a function, we always want to define what we want to return, and this is actually a perfectly good reason why, because what i want to return is a bunch of jsx elements, an array of jsx elements.

However, what happened was typescript inferred that i'm going to return an array of nothing, and so you can see here where this can get really really problematic. Essentially, with a function, i could potentially want something, but i can accidentally return something else and typescript would really have no idea because it's going to infer that, hey, maybe that's what he wanted all along.

So this is why it's super, super important to actually define ultimately, what you want to return. So you can do that by doing something like this: ultimately, i want to return jsx elements and i want to return an array of jsx elements. Now you can see here we have a lot of issues now. So now what we can potentially do is we can change this to a. We can basically essentially now what we can do is we can cut this out. We can actually have our return in there and we can basically paste this in and, wow, it is completely happy. So you can see here the importance of actually defining the type in the, in the function, rather than having typescript infer it. Now you might be thinking, okay, how in the world am i going to know that this is a jsx element? That is an array? Well, one trick that you can do is once you are absolutely sure that this function is working correctly. What you can do is, well, you can go ahead and hover over this and you can see that, well, now it is inferring that, okay, it is returning a type of jsx dot element that is an array, and this is really how you would figure out the types in something as complicated as react. So now what you can do is: okay, you're absolutely sure that this is working correctly, this is what you want. You go ahead and you kind of save it and you test it out so you can see here it works perfectly fine. And then what you can do is, basically, for the future, you can go ahead and basically define that type. So you can go ahead and define that type right over here- apologies on the wrong one.

You can go ahead and define that type. So now, in the when you in the future, if you ever go ahead and you work on this function and for some reason, let's say, you forget to add this return, you can see here that you're always going to have a error triggered by typescript. So there we go. That is pretty much it so. That is pretty much it so in terms of the actual list. The next step is to actually work on this over here, and this is going to introduce a little bit more complexity when it comes to typescript, but we'll get to that in the next section.

So the last thing that we want to do is we want to create this form over here and we want this form, of course, to be functional, so we can basically add whatever it is that we want to add, and it should basically append a new card right over here. All right, so let's actually go about doing that right now. Now again, this is how our current application looks like. Now we could basically add this right over here to the coreapptsx parent component, but i think it is a better idea to just create a new component that is going to handle the presenting of the ui elements as well as the logic. So this component, we're gonna call it add to list.

So this is just the very simple add to list component, and let's actually go ahead and let's just do a quick import react from react. So we're going to import react from react and then we're also going to do const add to list. This is going to be an arrow function. We're going to go ahead and return and for now, we're just going to do kind of similarly to what we did before. We're just going to return a div. I'm just going to say add to list component. So this is the add to list component. Last thing we have to do is just do a quick export default and this is going to be add to list. There we go. So let's go ahead and let's render it.

One little trick that i like to do is, instead of actually importing the thing, what i like to do is just to straight up, just add the component and react is smart enough, or vs code is smart enough to figure out that? Hey, are you asking for this over here? So once you actually go ahead and click on it, you can see that it actually auto imports it. So that's just one little trick that i like to do to kind of speed things up. So there we go, our component is nice and rendered, so let's go ahead and basically create the ui elements right now. So let's do that. So let's go over here and let's create those ui elements now. Now let me quickly double check how the ui elements are supposed to look. All right, so the first thing that we need to create this ui element is a class of add to list. Remember, if you copied and pasted the classes, they all should exist right over here we have an add to list class that does a little bit of display flex, it gives us a width and it also does some margining, so you don't have to worry about that. But you can add it if you just want the, basically the component, to look exactly like the way that i have it. All right. So let's have an input element in here and this input element is going to be, well, of type, let's do of type text.

So this is going to be of type text, and we're going to give this a placeholder of name. So we're going to give this a placeholder of name, and then what we're also going to do is we're going to give it a name of name. Actually, we'll do that a little bit later. We're going to give it the class name of- well, we're going to give a class name of add to list, dash input, and then what we're going to do is we're going to essentially duplicate this. So we're gonna duplicate this for the four input elements that we need.

So let's go ahead and let's just duplicate that. So let's duplicate, duplicate, duplicate. Now let's go ahead and let's duplicate this, duplicate this, and we have duplicated that. The only thing that we're going to change is the placeholder. So let's actually capitalize this to name.

We're going to capitalize this to age, so age and this is going to be. This is going to be the image or the image url, so we can say image url over here. And the last thing over here is is: we're going to have the notes. Now, one thing to note about the notes is that this, right here, they're all, they're all input elements. However, the note itself is actually a text area, and i did this very much on purpose, not because, well, this is big, well, that is a reason you know you could want a text area for the notes, but it did it very much on purpose because it actually leads to a little bit of typescript issues.

But let's actually do that and let's change this to a text area with text areas. As you can see, here, typescript is complaining. There we go. We don't have type text for a text area, so that's one issue, but there's other issues that we might run into. So there we go. So now we have this right here. So the first thing that i want to do is i want to create, basically a piece of state that is essentially going to house all of the values that we have. Here i want to set up two-way binding so we can say something like input and then set input, and this is essentially going to be use state.

So we can use that trick again where i basically just click on it and then you can see here it auto imports, or you can go ahead and import it and this is going to be an object, and this object is going to have the name, which is a string, and then the age, which is also a string, an empty string- a note, which is an empty string, and lastly the image itself, which is an empty string. So now what we can do is we can essentially do that the value is equal to well, whatever this state is. So we can do something like input dot name. So here we're just setting setting up a little bit of two-way binding. So this is just typical react, not really type script d. So over here we have input name. Let's just change this to inputage. Let's change this to input dot image. Now if i do something like this- again typescript is really smart- it tells us that hey, it's wrong, because again it actually inferred the type of this right over here.

Okay, so the next step is to actually set up an on change function so that if you actually change basically the text over here, it actually reflects on the state. So let's create that on change function so we can just create a cons. We're going to call this actually handle change and then let's go ahead and let us just- i'll just define it right now- so now, over here, let's call on change and then we're going to call handle change. So now, essentially, what we want to do is we want to basically figure out, okay, what, what this input element is responsible for changing, and essentially change that state over here.

So to actually figure out what the input element is responsible for changing, you can actually use the name property and we can say that, hey, this name is name, because this is responsible for, well, the name. Similarly, over here, we can do: well, this is responsible for the age. And then, similarly, over here, the name is going to be image and i'll add the name for let's actually add the name for this as well, why not? And this is going to be well note, all right, and so let's actually add the on change for all of these, except for the text area.

I'll leave the text area for last, just so i can show you a little bit of a problem that arises. So now, one thing that we can do is we can basically essentially set the input to whatever, to whatever the input element is, so whatever the input element currently is, and then we basically say that, hey, we want to change, and over here we can get the event. You want to basically change the eventtargetname to whatever the eventtargetvalue is.

So if this doesn't make any sense to you, essentially what we're saying here is we want to essentially change this input element to all of this, so to whatever this is over here, the name is the string, the age is the string, the note is a string, and then the input element is a string, so whatever it currently is, however, we want to override, we want to override whatever e dot targetname is to e dot target value and essentially, whatever this is, this is going to be whatever input element that we're changing its name property. So if we're changing this over here, this element, well, etargetname is going to be, well, it's going to essentially just be name. And then if we're changing this input element, well, this is going to be age, and so, essentially, what we're saying is okay.

Well, we want the name, the note, the image to essentially stay exactly the same by doing this d structure. However, we want to change this to the etarget, so i should go ahead and change that back. That is what it is doing. This is a simple two-way binding. Now, however, you can see here that well, well, we're running into a little bit of an issue right now. It's actually doesn't really know what e is. Essentially, we're saying here that it is implied any, and when we see something like any, it can literally be anything. Typescript has no idea, and that's why it's giving us this little error. Now we can basically say that, hey, we want this to be any by actually declaring any, by telling typescript that we want to be any, and then it's completely fine with it. However, that's not really what we want to do.

So how do we basically solve this problem? Well, we can actually hover over the on change and you can essentially see in the basically the type that this on change is responsible for. So one thing that we could possibly do actually is: let's actually get rid of this handler and let's actually declare a function right in here and then, inside of this function, let's actually define that e target. Now, as you can see here, this is not triggering any error like it does over here, and that's because if we actually write the function inline it, a typescript has a great idea of exactly what the type is going to be, and you can see here that the type is- oops, i keep hovering over it- the type is react change element and then the actual element itself over here, so html input element. So now what we can actually do instead is essentially, let's actually go back to the change handler and then we can basically copy that and paste it right over here. And there we go, that works perfectly fine. So now what we can do is we can go ahead and we can basically change all of this. However, we can't change the notes because we haven't handled the binding in there. But that's terrific. Like this, this works perfectly fine now. So now what we can do is let's actually go ahead and let's copy this and let's paste it in here. And you know you might think, okay, well, this is great, but it is not. As you can see here we have a typescript error and basically the typescript error is saying that hey, the e. Target is supposed to be html input element. However, this is html text area element. So this is kind of where the problem arises. So to fix this problem, what we can do is we can basically copy this and essentially we can say right in here, right in these triangle brackets, html input element or with the pipe, html text area. So we can save this and now everything is fine and dandy and happy.

There we go. That is terrific. So what is the next step? So the next step now is: let's actually go ahead and let's create that button so that when we actually go ahead and input a bunch of elements, we can actually save them to the card. So let let's go ahead and let's create this button. This button is going to exist right under the text area. It's going to have- well, it's going to be a button, and then we're going to say add to list. And then in here we're going to have a class name of. We're going to say add to list: dash btn. So now, if we save that, we should get our button. Terrific. And now what we want to do is we want to add another event, and this is going to be an on click event and essentially, when we basically call this. We want to call a function called handle click, so we want to handle a specific click.

So right now it's giving us an error because, well, this is not defined. So let's go over here and let's actually create const handle click and let's go ahead and let's return this function or create this function. Now, one thing that i actually forgot to do is i forgot to define, ultimately, what we want to return for this function. Now, for this function, we want to return void, so we can basically say, well, void, we want to return nothing. Basically, void is nothing, and that's essentially what we're doing here. So if we accidentally end up returning a string for some reason, well, typescript is going to let us know. So, let's, let's, let's make sure that we do that for this as well as this over here. We really don't want to return anything, so let's go ahead and we're going to say: we're going to return void. Basically, all we want to do now is we want to get all of the elements right over here and essentially, essentially append them to this right over here. So we want to append them to the people. So we basically what we need is is: we need access to the set people function right over here inside of this component, and, of course, we are going to do that via props. All right, so let's actually get to that right now. So remember, when it comes to props, we define interfaces, so we go ahead and we're going to define an interface. Now what we i could possibly do is i could possibly go ahead and create an interface similar like this and essentially add it into this component.

But one thing that i like to do instead is, if i'm using basically the interface that i defined in a, a, a parent, and i'm basically passing it down to props, what i like to do is i like to just export this particular interface, and so essentially now, what i can do is, if i go back to the list, instead of actually defining this interface, which i basically defined right over here- and this is very repetitive- i can basically do something like, well, import something from app apptsx and that is this. That's something that i want is the i state, and i can basically say i want it as i props. So i can go ahead and actually get rid of this, and this is going to be exactly the same if i actually hover over this.

It's going to be exactly the same. Actually it doesn't show it, but you can take my word for it that it's going to be exactly the same, because you can see here that no errors are occurring in typescript. So we can go ahead and save this and again, everything is exactly identical. So we can basically do the exact same kind of import right over here. And then what we can basically do is we can actually create an interface for this. And the reason why we're going to want to create an interface for this is because we're going to ask for, well, the people and the set people. So we actually need a particular interface. We're not really just asking for this over here. So let's actually go ahead and let's pass these down as props.

So let's pass down the people, let's also pass down the set people. So to just quickly explain why we need both of these things: we need again we set people because we want to ultimately manipulate and mutate this by appending things to it. And then we also need the current people list so that we can essentially not override it, but we can basically just push into the current component, and that's why we need both of them.

Now you might be saying, okay, this is kind of weird. Why am i getting an error here but not over here? Well, that's only because typescript is going to just tell us about the first error and ignore the second error. However, if i end up solving this error or i remove this error, typescript will tell us about the second error. So there are still two errors going on. Okay, so let's go over here and let's create our interface and we're going to call this: well, i props, and over here, because we're going to call this iprops. Let's just say props over here. And then this is going to be: well, set people, so set. Let's actually begin with people, so people's going to be very easy. So we can say people, and people is going to be of type props of people, so type props of people. So that's the first thing. And then the second thing is set people, and this is a little tricky. What's the type of set people? Well, as always, to figure out the type of set people or anything in react, what i always like to do is i like to basically hover over it and, right there, it tells you the type. So, right there, it tells you the type. So we can go ahead and we can copy this and we can define this type right over here. Now, this is a little bit messy and that's why, essentially, we basically passed down the props, because this right here is identical to this and that is completely identical to that. So now, if i actually save this and i go back over here, you can see that we have some sort of error going on over here. I'm not sure why, actually being that, oh, of course we're gonna have an error. We haven't. We have only defined the, the eye props, but we're not using it. So to actually use the eye props, we can basically say react dot fc, and then this is going to be an eye prop. So this is a react functional component with eye props.

So now you can see here that the error is gone. The only the only reason why i'm getting this type script error here is because this is not saved. So that was actually saved like this, so it's actually saved like this, and that's why we're getting this typescript error. You can see here. Now, if i save this again, there we go no error. So that is that. So let's go ahead and let's actually complete this application and thus this crash course, by actually populating this, this on click function. So the first thing that we're going to do is let's go ahead and let's actually ensure that you know they at least provide us with the name, the image and the url. These things are not empty. So let's make sure that they are not empty. So we can do that with simple checks, so we can say if input dot name is, is, is basically is empty.

So if that's empty, so if if we have an empty string, that returns false, and so essentially what i'm saying is: okay, well, if this is an empty string, and i'm basically saying basically kind of the opposite of this and this results in a true boolean value, and so essentially what i'm saying here is basically, if this is empty, then i want to do some sort of logic and i can also say: or if the age is empty, do some sort of logic, and then, or if the- i believe this is the image- or if the image is empty, then what i want to do is i just want to return early, so i really don't want to do anything, and then, if everything is fine and dandy, we want to continue on.

So note that i actually didn't put the note in here because, remember, the note is optional. We don't really care for that. So now we can actually use the set people, we can actually use the set people function and we can basically now define everything that we need to define in there and over here. It is basically triggering an error because, well, we don't have, we're not really structuring out people and set people. So now what we can do is we can say, okay, well, i want to set people to every person that is already in our list, plus a brand new object. You can see, here we're already getting errors because, well, let's see what the errors are: type: this object is missing. Type name, type, age, type, url. So now what we can do is we can basically say, well, the name is going to be the input dot name, the age is going to be the input dot age. We're going to run into the issue within the age in a second and i'll show you why that is. And then over here we're going to do the input dot image and then we're also going to add the note. So this is going to be the input dot note. All right, so that is terrific. We're running into a few issues here. I was expecting running into an issue when it comes to the age. I wasn't expecting an issue when it comes to the image, but i think once we solve this problem, i think this one will also be solved as well. So what is the issue that we are facing here? So the first issue over here is that- hey, let's actually hover over it. It says type string is not assignable to type number. Now, this is this, is that right? There is exactly why we want to use typescript: because this is a very, very common error. Now what could one? What happens is that when you actually define a number in an input element, what ends up happening is that the, the number itself, is actually of type string. Once we get it back, the e dot target dot value is actually a typescript type string, even though it is actually a number, and we can actually even over here, we can say, instead of type text, this is going to be of type number, type number. And over here we're getting an error. Let's actually quickly comment this out. So let's comment this out: and even though this is type number, we actually can't even input anything, i guess, other than e.

We can't put anything but numbers. This is still going to be a string. This is still going to be the e target, that value is still going to be a string. So, essentially, what we have to do here is we have to basically realize that, okay, this is a string and we actually have to go ahead and parse it into an integer and, honestly, we wouldn't have caught this without the power of typescript telling us that, hey, type screen is not assignable to type number, so let's go ahead and let's parse the integer.

So, okay, so we're almost done here. We're running into another error, so you can see here that, okay, so type a name, age, image and then note is not assignable to. Well, i can actually see the error and this was honestly an honest mistake, and this is why typescript is so valuable. I thought it was going to be url or image, but it's actually url and that way, typescript is telling me, hey, you did something wrong, dumb, dumb, fix it up and that, right, there was a completely honest mistake. But you can see how typescript actually serves as documentation and allows you to catch errors early in development. Okay, so let us continue. So now we actually set the people last thing that we want to do. Actually, let's go ahead and test this out. So let's go over here and let's just add something. We're just gonna add some dummy and there we go, it is working perfectly. You can go ahead and just copy an image from whatever to just test it if the image is working, but it is working perfectly fine. The last little thing that's not really type scripty is once we actually add an element, let's go ahead and clear everything. So let's go ahead and let's do set input. We're going to set this input to well, this over here it being completely empty.

So there we go, let's paste that and we're done. We are completely done our application. So if i do a quick refresh, you can add just a bunch of gibberish now and there we go, it is completely done. And we built this with typescript. I hope you guys got a great idea of why typescript is so valuable and why it is such a great tool to use with not just a react application, but you can use typescript with a back-end application, with with literally anything. You can actually use typescript instead of javascript and this is why i love typescript, because it it really it really ensures that, hey, you're going to catch errors right there in development, rather than the slow process of catching errors once you actually run them in your local machine.

So i hope you got a great understanding of typescript. Again i kind of displayed pretty much all you need to know about typescript. With react i described how you can do types with props, types with state, type with functions, as well as types with event handlers. So i hope you guys got a good in-depth understanding and i will see you guys in the next one.