React Typescript Tutorial

all right so this video is for those of you that are familiar with react and you want to start using typescript so we're going to be talking about how you can start doing that we're gonna cover three main things in this video one how you can integrate props and start checking the types of the props you're passing into a component how you can integrate typescript with your hooks and then lastly how to create a render prop component with typescript and making it type safe we're also just gonna go over some general tricks and tips that I use that I find pretty helpful now before we get into this the first thing you really need to do is setup a project that can handle and compile typescript code so for this you can go ahead and set up what PAC and to set up a TS config but if you're just starting out I recommend just like picking up a boilerplate that does all this for you by default so the one I'm using in this video is create react app and if you want to start a types your project with that you can run the following command create react app the name of your project and then you just do the - - typescript flag and then you're good to go and so you get a project like this and then you'll have your TS config filled out for you and you don't even have to worry about what pack and all that stuff all right so let's begin so I have a component right here and let's say I want to render another component here and I want to make sure the props are being checked so I have this text field component that we're gonna start with alright so this should look normal to those of you that are familiar with react and this looks like a regular JavaScript react component here so the first thing we're going to talk about is how I declare this thing as a component and typescript so I can define the type of a variable here so this variable is just text field give it a colon here and I can say react dot F see this stands for you can see in my autocomplete window a function component oops and so this is a type that react actually gives you so react actually is giving you a type syrup type that you can use here so I just told everybody that this variable text field is now a function component and the next thing I can do is I can specify an angle brackets the props that it takes now I can pass in an object directly here and specify for example that it takes text which is a string alternatively you'll see a ton more people do this they'll declare an interface they'll usually call it props so this is the name of the interface and then you'll put all your information inside of here like text which is a string and then right here what we'll do is instead of having an object we will pass in the name props so as soon as I do this I've now declared that this text field component expects you to pass a prop called text and it's a type string so what this means is if I come over here and I try rendering a text field and that autumn before it for me thanks B is code so you'll notice I have not added anything yet all right it's giving me squigglies and if I hover over this it's going tell me property text is missing the other nice thing is if I put my cursor here and just do control space and I scroll to the top I'm actually going to see the three things I can possibly pass to this component now and I can see my text here all right so I can say hello so now I'm passing in this prop and now it's happy it knows I should pass it in and so the other properties or I guess data types that you can do is you can have a boolean you can have a number and a number represents an integer or a double so we can say I for example and then what else do we have we have a function which looks like this so how function works is you an arrow function and then you can either say what it returns here so if you don't want to return anything it could be void you could a number here could return a string and so on and then here's where you put in the parameters so this expects a parameter called Bob and that's a string you can also do objects and that's just using curly braces here and I could say field one is a string you can also create an interface called person which takes a first name which is a string and a last name which is string and you could pass that as the type here all right so now my person basically passing an object in here as the type and so I just added all of these as props to my text field and so they're required for me to Pat to basically pass in now and again in control space and I can see all the ones that I need to pass in so you can see any a person and now if I pass in an object and hit control space we're also going to get auto completion here which is pretty nice so a last name and I can pass all those in now let's say I don't want all these to be mandatory like for example I'm okay if you don't pass this in you can do a question mark right before the colon and that basically means that the field is optional or the prop is optional all right and so you don't have to pass that in now so if I make all these optional I can come over here and I can see it's happy with me but if I get rid of person that one's mandatory and now it's telling me about so you can erase see this is a pretty nice advantage that when we start using typescript is you can declare these things and now anyone who's using your component knows immediately if they've passed in the correct amount of props so cool so that's basically props for you and again you create a reactional component you pass the props in this angle bracket right here the other thing the to note is you can access your props you know this right here but then our nice thing is if I do control space with my cursor in between here I get all the types here and I can get Auto completion as well so I can control space person control space okay and I can very easily expand that so that's a pretty nice one alright so let's move on to hooks so the most common hook you're probably going to use is you state so by default it's gonna actually infer the type for you so for example if I put five and let's my count and this is set count alright so I can see if I hover over count I can see the type of it so I can see it's been inferred as a number and you'll notice this didn't require me to do any extra work right it just automatically deferred or inferred now let's say that I want to allow myself to set the count to five but also won't allow it to be null as well right there's no way for me to tell this that it can be five or null for it to be inferred so in cases like this you use angle brackets right here and you can tell typescript what the exact type should be so in this case I'm going to tell it it can be a number or it can be null so in typescript how you do or is a single pipe so here I said this this state that we're storing here can be a number or it can be null and so now I can pass in null or I can do 12 or 10 or whatever I want and both work one thing you may notice is undefined is a different type than null so if you want to accept undefined as well you could say we run defied could do or string and I can take strings hello all right and just like how we did with props you can pass it an object here if you want it so let's say I wanted this to be text you'll see immediately it's going to tell me that I didn't put in a correct initial state here so I'm going to say text hello and so we're now gonna get checking when we set the initial state and when we set the count here that this should be an object that we're passing in and again if we wanted to could create an interface text node which is text and it's a string so I just created an interface you can pass the interface here so you pass interfaces or objects or really just whatever the type is so the next hook that is going to be a little bit weird is going to be a use ref so for example let's say I want to get reference to this input field here so let's clean this up a bit and I want to say I guess let's say input ref is what I'll call it I'm going to say use ref and link and pass in a ref here so if we hover over this see it's getting mad at us it's telling us that basically the types are not compatible and so what we have to do is we need to tell typescript what the type of this reference is or what should be holding so we can do this by passing in angle brackets right here and specifying what the input we're actually gonna store in this so an input can actually or a ruff can actually store anything so again we can put any type here but in this case what we want to pass is this input so what I'm about to do is to show you a pro tip that's gonna help you out a lot so it doesn't matter what component you're setting up or you're wanting to figure out what you're supposed to put the value in here for the ref what you can do is usually I just write ref is equal to an empty brackets here and I hover over ref and now this may look like total madness right now but you'll get used to reading this so basically this part right here is just the name ref and you can ignore it we don't really care about that part but after the colon this is the part we care about so this is the typescript definition of what we should be passing in to this property so we should either be passing in a string or we should be passing in this function or we should be passing in a ref object and the ref object is actually what we are passing and they even tell you right here it expects a ref object and in the angle brackets you should be putting HTML input element perfect so I copy that and put it right here and now I can put input ref here and now it is happy well it should be happy it's not let's see what it doesn't like currents are incompatible type and HTML input or undefined it's not assignable to HTML or null all right always because I did I did okay it's because I did nothing in my parentheses here if I put a null yeah now it's happy okay so that that's the other thing you're gonna get used to it with typescript they have these kind of odd-looking error messages you're gonna have to get used to reading some of these but when you get used to them they're not too bad usually I scroll down to near the bottom and you can kind of get the gist of them alright this was the particular line that queued me into what I was doing wrong and I can see that I was passing this is the current type and this is what it should be alright so that gives you another hint of what you could be passing here alright so that should be null by default and then we're passing it in so cool now it's happy with us and so I can use this with no matter what I'm trying to get the ref of or no matter what prop I'm trying to pass in I can use this hover technique to figure out what I should be doing alright just to exemplify this let's do this one more time so let's do a div ref alright ref I'm Dib ref right it's actually pretty happy with me just passing it in like that that's surprising but if I hover over the ref here I can see I should be passing an HTML development pass that in there we go so again just hover over the ref and I'll tell you so here's another example of doing that in kind of a different context so let's say I want to take the on change method of input right so on change and take that as a prop all right so I'll call it handle change well what should this function be here all right if I want to correctly give this the right type what should handle change it'd be that way I can do handle change pass it here right so I can pass it in here right now and it's happy with me but we're not getting the full definition right because there's an event we can pass in here so this is where we can do the exact same thing I can hover over this and I'm kind of blocking this let's scroll up a little bit if we hover over this we can see that again look for the colon first : so on change takes the type of a function and this function can either return all here area so it can either take a function or it can take undefined and the function that you pass in takes an event as an argument so what I can do is I can copy this and I could pay so here and there you go I have the correct type for this handle change now to be passed in and so the cool thing about when you get the correct type passed in is that means I get type definitions over here and really that what that amounts to is I get nice auto completion now so I pass in my handle change here's my function and now I can do a dot and I can see all the different things then I have access because this is a input event so that's that that's how you kind of find the types you should be passing in to different stuff hover is your best friend when you're using typescript go check those out okay cool so the next hook that I want to go over is the reducer hook so let's hop over here so the reducer hook works a little bit different than those two hooks so here's me using the reducer hook in action so I said use reducer here's my reducer function and then this is my initial State so you'll notice no types actually go here but in our to do reducer that's where we add stuff so then our to do reducer what we specify is the state of our reducer so this is a type that tells us what we're actually storing in the state and then we also pass a type of the possible actions so I called this action but really this should be actions also I just pushed f2 here f2 is what allowed me to just rename both of these variables yeah so this is the possible actions so let's walk through this real quick so first I want to define all the different actions that I can pass for my reducer here so the way you do that is you say type actions and you say equal sign and then you see we have the or pipes here so we're saying object or this other object and here I specify the type and any other variables or fields I pass in to this action so in this case if I'm adding it to do I want to also pass the text if I'm removing it to do I want to pass in the index and so it's a string and that's the number so I have two objects here that are possible actions and then here you can see I create an interface called to do text is a string and complete is a boolean and then we just have an array of those so I actually forgot to mention array as one of the basic datatypes but this is how you create an array you can also create an array like this array and then in your brackets you specify the type but yeah so here I said type state is equal to an array of two Deuce so in my to do reducer wierdest storing an array of two Deuce so that's what that's doing so basically in your to do reducer you need to create these two types what your States going to be and what actions you accept and that's how you type the user ado sir and so when you do both of those things what you get is actually some really nice auto completion again so when I'm dispatching an event now you can see if I hit control space while my cursors here I can see all different ones I can possibly pass in if I click type I'm also getting all completion of the types that I can pass in so I can pass an add or remove and then if I pick remove as my type I can see I need to pass in an ID X so let's do five and so that's pretty sweet and then again my two dues here it knows that my state is an array of two dues because we passed it right here so now I know it's an array and get the first element and I can see text and complete from that so there you go that is how you can do the use reducer hook the other hooks there's not too much other other stuff you have to do for typescript for them so I'm gonna go ahead and skip them and go to the last thing that I want to talk about which is render props so we're gonna create a new component here called counter and I forgot to mention this but and typescript one of the big differences you're gonna see really I should have mentioned this right away is you do dot TSX for your file name instead of dot JSX and then in non typescript files you call them or sorry non react files you call them dot TS so dot TSX for react and non 130s so I like to use this little snippet I call it RH and it'll basically do this for me and then I can call this counter so if you'd like to do the same thing I'll show you how in a sec but basically what I do here is I just have a export my component I have a function component here and I have just an empty interface I can now pass in my types or the props that accepts now if you want to actually do that you just go to your settings here preferences user snippets and if you go to typescript react you can see this is my particular snippet and I'll put this below if you want to see all my snippets but this is the one snippet that I use a lot when doing react in typescript alright so I have my new component here so what I want with this component is we're going to say Const you state we're gonna just store a counter here we're now count set count and we're just turn this into a render prop so what I want to do is out Narinder div then we're gonna render some children and now my children I want to give them what the count is and I want to allow them to update the count okay so this is a just a very simple render problem now to actually get the type definition for this what I do is I say children and my props and this is a function that returns JSX element or it returns null and then here I can say the first variable is count which is a number and set count is something so what do we think a set count is well I can just hover over here and I can see exactly what it is and I can copy this type loops and we could paste it in there if we want to dang it there we go right so we just pass in right here all the parameters that our function takes and then this is the big thing we will return gsx so now in our app over here you can get rid of our text field and I can render a counter alright and I can render a div and let's say I want to render the count here you can have the count and we can have set count and this is going to have right if we hover over it's gonna have the type so it's going to check stuff for us so let's say we have a button alright then we want to increment you can say on click set count is equal to count plus 1 now if I were to happen to do something silly and pass like a string it's gonna catch it for me because it knows what the type should be alright so that is how you can properly type a writter prop and I still tend to use these now and then so I figured I'd show you guys and again this doesn't have to be multiple parameters this could be a single object all right this is another common way you'll see them working so I have a single parameter called data and inside of that is an object or really the type of data is an object so we have our account in our set count and now I can just de structure this that's the other thing you'll notice about functions and typescript is you actually have to we need to pass it correctly here to is you have to give them a name so the name of the first parameter I'm calling is data so yeah so that is render props really there's really just one last thing I want to leave you guys with and that is whenever you're unsure about some things or another good way of learning some of the types of these things is to actually right-click on them and there's two things you can do you can peek the definition and this will show you a little sneak peek of what the type is now again this may look like pure gibberish to you at first but as you get better at typescript and you can Google some of these and take it slow you can kind of break down what they're starting to do for the type of this I actually clicked into this we can also right click and go to definition and I'll actually take you to the file so for example here I can see that you state takes this s thing that's a generic by the way and I can see that it has this dispatch type and I can go to definition of the dispatch type and I can see what that is and I can read all the types that react uses and you can do this with any library that uses typescript so that's a helpful thing they use now and then but there you go that is an introduction into typescript and react and some helpful things that I use

Channel: Ben Awad

Views: 356,389

Rating: 4.9596758 out of 5

Keywords: React, Typescript, React Typescript Tutorial

Id: Z5iWr6Srsj8

Length: 23min 32sec (1412 seconds)

Published: Thu Sep 05 2019

Reddit Comments

[u/benawad]

I made this for those of you who are familiar with React and want to start incorporating Typescript.

[u/wu-tang-james]

This is great. I've been using React + TS for a bit now and it's amazing. There is no way I can go back to regular JS.

[u/teerryn]

Hey Ben I love your videos I just miss your project ones, any plans when are those returning?

[u/IgorWebdev]

this guy reacts