Learn Typescript with React | Quick Crash Course

hey there my gorgeous friends on the internet in today's episode we're gonna take a look at typescript I know loads of you requested it so I'm I was surprised actually I didn't have a video on my channel yet and I also want to show people that have never touched typescript before just how easy it is to learn by the end of this video You're gonna be up and going with typescript you're not going to be an expert let's let's lower our expectations here I'm joking but uh you'll be good to go you can go into your next react project and just start using typescript and you'll be good to go so hope you're excited and also check out the courses down below I am full on working on remaking the full stack react course with typescript then Prisma and all the good stuff so that's going to be excited and of course if you even get it now if you get the full full stack course the update's gonna be free so you don't need to worry let's go so tip number one to get started with typescript and react is choose one whether you go next or wheat so let's try it with wheat first all you have to do is head over to veet.js.dev and run the command npm create Veet at latest and that's going to automatically give you an option to do let's let's give it a name type script react and it's going to automatically give you an option to pick a framework so let's say react and here we get to choose if we want to have typescript included which We'll add and that's pretty much it that's how you get started and then you can CD into that project run npm install and then open up the dev server and you are good to go same goes with next.js as well when you run npm create next app or whatever the command's name is I always forget you'll be able to add typescript into that project and once you add let me just quickly show you the next JS project I have going on here so if we head over here to learning and go over to typescript next I highly recommend uh it's probably gonna default you with the typescript files here but if you even have JavaScript files I just recommend literally renaming them to TSX and having the as trick Mont turned on here in the TS config file and then just head and see which areas you're gonna get and try to correct them on their own okay let's start up this list off with a super simple example all you need to do in this case is we're just running next JS and all you need to do is rename your file to TSX and that's it and we have just a simple component here where we use client and we import you state right we cannot use state if we don't have use client here at the top but that's it um so what we're doing is we are creating a state where we hold a post title all right and by default as you can see if I try to change that post title it's gonna say no yeah can't because that's a number so that's the nice thing about typescript you don't even actually need to do too much because these hooks like you state and use effect are automatically inferred what the hell does damn mean God damn it it means that we don't need to specify a type it just automatically recognizes it since we added the default value here as empty string it's not gonna let me add a number now so it's going to say hey number not good we want a string so that's cool so if I try to do even like a Boolean or something false it's gonna error out as you can see just like that so that's it however you might have a specific case where you have a string which is fine but let's say for a split second it's gonna return a null value you don't have that data yet so it's gonna be null and then it's going to complain to you because it's going to say well it's not also I mean I don't know what to do with that so what you can do is specify here using the arrow keys like that and you can say it's going to be a string but I can add an or sign here like that it might be null for like a split second so then it's fine as you can see it's not complaining anymore so you can add another parameter here to specify that let's look at types really quick so what I have here is essentially just a function in this page.tsx all right this is in next and I have a server component here so we're just fetching some data from an API and I'm getting back the result which is just like a title and an ID all right so by default here I'm getting the post back but if I hover over data here it's just it's type any if I do a console log get posts sorry data and we do an npm run Dev as you can see here we have an array of objects all right and that's all the data I have cool but I mean it's still not it can be any type and that's usually what you want to avoid you want to specify the data that you want to get back and then you also have the opt-in completion and you are safe from doing something silly so what we can do first of all is just Define a single type if we want we can just add a colon here and I can say well this is a type string right I know I'm getting back type string from this as you can see now data is type stream but now as you can see I have loads of Errors saying well you cannot map over a string so that's not good okay but we know what the data type is so what we can do is just go here to the top and specify a type on its own so I can say type post props right I'm gonna set that equal to an object here like that so I know I'm gonna have an ID here so uh this is going to be a number basically so I can just say number and we also have a title that's going to be a type string so that's cool now you can also have like a top toggle or whatever that can be true or false so that can be a Boolean here if that's what you want if you want an array of objects which is what we have in this case I can just add an empty pair of an array now you might also have data that you're not sure if you have or not so I can say message another question mark like that and say string all right now this might exist this might not exist that's perfectly fine okay so now we can go here to the actual function right here and I can specify with a colon that this is going to be a promise like that interface promise and I can specify that the type here is going to be post props by adding it like that and that's it that's essentially it so now if we take a look here on data it's going to say it's type post props and now if we go down here and let's say I want to render something else out I can say post Dot and look at that all the properties show up and I can just click it and I know that's going to be perfectly fine okay let's look at props so even though I defined a post props here which is going to Define what we have access to in the data which is perfectly fine so I can do it down here right if I do post again I have access to whatever I Define them I post data like that cool but what if I want to pass down props so let's say I have a function here that says function posts and I'm just rendering out the hello here all right simple and stat well if I go here and replace this H2 here right we have it and I just want to replace it with the posts and render out this rather than just the H2 down here so let's replace it with post okay so by default I don't know what value I can pass in here what does this post need I'm not sure so we can actually Define that here in posts so again all you need to do is do a type and give it any name you want I can just say post type or post props I think I did the same name here but it's it's fine it's going to work just fine I'm going to set this equal to a curly bracket object here and here I know I'm gonna have an ID that's gonna be a number I can have a title that's gonna be a string and I'm also Let's see we have a toggle here that we can set to false by default all right cool and let's see here we have like a button that does some sort of weird on click on all of these and it just runs the function and let's say we have a toggle here that does whatever right from use effects so let's say import use sorry use date I meant from react and then down here I can say const toggle and set toggle or whatever but I'm going to keep it simple let's just keep it like that because all I want to show you is once you define it here your type and then we go here um we can extract them ID title and let's say toggle from the post props cool and that's it that's all the setup we need so now when we're back here in our post props if I just add a make make a new post like that see I know exactly what data this post needs for it to work so I can do an ID if I want to and I can pass down post ID and I can pass down title set that equal to post dot title and I also have a toggle so let's pass down that as false cool and hit save and that works perfectly fine now what if I don't have a toggle so look at that I say toggle Falls but I'm not passing down a toggle then it's gonna say well hey you need the toggle so make sure you pass that down otherwise this component's not going to work for you you're gonna have tons of errors but let's say it's not necessary to pass down the toggle that's like an extra feature so I can just add a question mark here and then as you can see that's an optional property now we don't actually need to use it what we can also do is let's say we make a library or something and we specify that we have a component that has three different values that you can use so let's say I have toggle here and I can specify something like this uh closed and or open right so I can do closed or open there we go so now when we hit save I can come here and I can define a toggle and set that equal to and as you can see if I take a look hit control space it gives me two options which is closed and open and that's going to be perfectly fine no errors whatsoever if I try to define something else uh uh shot it's gonna error out and say Shut is not assignable so either choose closed or open but what about the children male um yeah let's see children and how that works and after this I also want to take a look at on click and on change and event listeners and stuff like that because they have their own specific types now honestly you just need to look up and see uh what they're called because you wouldn't wouldn't guess it so with children here it's going to say hey children cannot be a type of any right and all we're doing here is essentially getting the prop here of children and just rendering out each different page down here so but we need to specify that hey these are the children and they're going to be the pages and we cannot pass down anything else so for for children what you can do is do a type of uh let's let's just call it props okay our children props would be probably better children props and this is going to be this is gonna have a children on here and that's a type of react Dot react node like that cool so now we can just go here and add a children prop and as you can see that's not gonna complain anymore and everything is perfectly fine and we can see that this is a perimeter child of children that's a react node now you don't need to necessarily specify a type up here if you don't want to because essentially it's an object like that right so if you want to you could not do this and just get rid of the children props here and Define it here like this children react.react node like that and hit save and as you can see that works perfectly fine and then we don't need to define the type I like to define the type I feel like it keeps it much simpler and it just doesn't look that weird to me okay let's see how we handle on clicks and on changes and stuff like that so for now just look at this for a second here uh just ignore ignore this ignore everything just look at the button here and this change title okay so what we want to do is I'm just going to add an on click on this change title right so let's say when we click the button this title is going to update to something random so I can say um set new title to woo cool but let's say I also want to do something with the event here so maybe uh I have an input here or something right this e says that it's type any values never read and if I try to Type e dot whatever see nothing really shows up for me so by default if you separate a function like here you need to specify the event and what type it is but the problem is if we Type e dot something see we don't get the actual event so we have no idea what we can use so for that again you pretty much have to look it up on the internet and search hey um react uh on click typescript right and see what type it is so in this case if you look it up on the internet you need to do react dot um Mouse events and that's it cool so now that we added the type now it says e is type of mouse event and when we Type e dot look we have client text client y movement X everything that you need Target screen and then you have your autocomplete nice and clean so that's really good now that's one way of doing it now if you don't mind you don't even actually need to do any of this here what you could do is not make a separate function as long as you're happy writing it in line like this so button on click I'm just going to add an arrow function here again it's going to automatically do it for you and it's going to say it's a mouse event with a HTML button cool so now if I type e dot blah blah as you can see it automatically completes for me so if you don't mind to do it in line rather than making it a new function go ahead and do that or if you want to do it separately just write it out in line and just find out what type it is right here because you essentially can just see it and copy it over alright so that's gonna be it hope you enjoyed this episode again I recommend just literally taking a file and renaming them to TSX and see what kind of Errors you're getting here and try to fix them one by one and that's going to teach you loads about typescript and sometimes it's better to not over complicate it and do loads of types sometimes it's better to just maybe start simple and you know whenever you define a parameter add a type to it whenever you're making a a component and you're passing down some props go ahead and do that and see how much I can help you out all right that's gonna be it for me today if this video was helpful please drop a subscribe and a like and let me know what you thought of it thank you so much again for all the support and I'll see you guys in the next one peace

Channel: developedbyed

Views: 85,644

Keywords: react, typescript, react crash course, typescript crash course, next js, typescript next, typescript react, full stack web development, web development, dev ed, developedbyed

Id: kq6IhAZVNh8

Length: 16min 59sec (1019 seconds)

Published: Sun Feb 05 2023