React and TypeScript - Getting Started

more and more web developers across the world are looking to use typescript which is a strongly typed superset of JavaScript it's already the default language that you use with angular I'm gonna show you in this video how to set up your react projects to leverage the awesome power of typescript alright so first off if you enjoy the video like it subscribe to the channel and turn on the notification bells so that you get notified when the latest content comes out so as we get started I feel like we should give a little extra background on what typescript is so typescript is a strongly typed superset of JavaScript so two things there that are really important the superset aspect of this being a superset of JavaScript means that any valid JavaScript is also valid typescript but then you can add on all the features and amazing things in typescript like defining types of your variables defining types of parameters for functions defining types of return values from function defining interfaces which we'll see in a second things like that that you can't do in JavaScript so you can do all of your JavaScript stuff in typescript and you can also take advantage of those extra features so the strongly typed means you actually get control over defining the types of your data the superset of JavaScript means it adds features on top of JavaScript well that also means is that the browser doesn't understand typescript the browser actually on there only understands JavaScript so your typescript has to go through some sort of transformation process to be converted down to regular JavaScript so the browser can understand so that's what react create react app or the configurations that are they are going to do for us we just need to kind of nudge it in the right direction to let it know hey we're using typescript and can you take care of the rest of this stuff so if you're interested in learning more about typescript we definitely check out the typescript website with documentation so this is that typescript Lang dot org and in there you've got ability to test out typescript you've got documentation a lot of good stuff in here that I would recommend checking out so also on YouTube got a link here for a video where I walk through setting up typescript inside of Visual Studio code so I'm gonna use vs code as my editor today you can go through this video for a little bit of extra setup and a little bit of extra background on what typescript is and how you use it so I'm gonna scroll over to a project that I generated with a command a create react type command that tells create react app to leverage typescript and that command you can find in the create react app dot dev slash Docs let me zoom in on that over here so you can see that URL right in there so on this page there's two different ways with create react app to add typescript so one is to do it from the beginning which is to run the create react app command to the name of your application and then the dash dash template type script so this will go ahead and generate a project that is ready to go with typescript so that's we're gonna look at first so inside of this project actually this is the wrong one let me switch over to this one the one that actually starts with typescript so notice that these files end instead of JavaScript they end in TS x which is the typescript file extension so let's open this up let's actually start to run this npm run start let's go ahead and start this up and this will take a second it should be up and running alright cool so that's up and running so one of the things that I want to show is let's say let's say we create a header component so let's do a header dot ts X and let's just look at what's inside of the F dot TSX nothing really special here so inside of header TX X I'm gonna use an extension this is the 2018-19 react redux graph QL extensions you can find inside of inside of es code it's actually es seven react read graph QL so let's do a functional component and this will be called header inside of here we'll have an h1 that says header and then let's also do a button and instead of determining what type of text to be in here I want to receive this from props so usually you would do something like this you would define props and that would be your parameter to your function but now that we're using typescript it's being it's letting us know that props is implicitly converted to an any type so this is gonna have a type of any and we can actually be more specific here so let's say we might do something like destructuring from props and i call this a it's got a button text property well this is still telling us hey we don't actually know what type of thing this is which is just not necessarily a bad thing but since we're using typescript we can go and go ahead and define that so what we'll want to do is define a typescript interface let's look at the documentation and bring up let's see a type trip in five minutes and search for interfaces so inside of here you can basically define what any given object looks like the properties of an object so let me copy this and I'll just paste it in here and we can define these are the header props and I want a button text which starts out at or is a type of string and then I can define my props to be a type of header props okay so what this means is with this function that I've just defined the owner with this component the only way I get to leverage this component is if I actually pass in an object that has a button text property so if inside of the FDS instead of having the header here or actually gonna we could just put it right on top let's grab the header component we just created and it'll do auto import of that component and if I just self close this tag this is gonna say hey this doesn't pass in the props that you're looking for primarily the button text property which is required for the type of header props which we define but we haven't passed so let's pass in button text now let's say click me okay so now that error goes away let's save this inside of the header dot CSX in the button we can use the props dot button text okay and that will go ahead and display that text let's pull it over here here's the header text and in the clickety button so that's the text that we pass is click me and we can also take this another step further further like we're probably used to and just D structure button text off of header props and then we can get rid of props here altogether which is pretty sweet so let's say we also wanted to maintain state in this application well we can work with we can work with you state with react hooks if you're not if you're new to that you can check out my react hooks video I'll have a link here in the video that you can check out but to use this will pull in you state and then I've got a shortcut ush I think maybe not let's just write this out from scratch so we'll have a count and a set count and this will come from use state and we're gonna start count off at zero and this should be a Const so what typescript is gonna do because we're using typescript notice that it's defining this value as a number and the reason is because we set the initial state the initial value of count to zero its inheriting the type of zero which is number and assigning it to the property of number you can also see inside of set count this takes let's see here this is what gosh if I can get the documents to come up here correctly you can see it's got the type of number referenced here as well so it's pretty cool so we are inferring the type of count let's do AP tag where we want to display count and then on the button on click let's call a function called increment and we needed to find that so Const increment equals and then we'll set count to count plus plus and this needs to be count plus one because you don't actually mutate this thing directly you call the setter and it will update that thing for you so count plus one and everything should work okay in here if we say we should click the button click me one two three four five six seven eight nine ten but if we tried something like setting this thing to a string typescript is gonna yell at us and tell us that's not how this works you define this thing as a number but now you're trying to assign it a string value and those two things don't match up so typescript now is giving us more control over what we're setting our hooks our variables too because it knows the type there as well so that works really well another thing that you can do is with your use state you can define this explicitly to be a number or let's actually have well we can start with number so number or a null value so this thing can be two things it can either be a number value or it can be a number you are excused me null value so if we started on a zero we could increase it or at some point if we wanted to I don't really know why we could set this thing to null so you can think of this as if you're loading let's see let's get rid of this one let's do let's say you're loading movies from a movie database so we'll have movies and then set movies and we call you state and we said it initially to null because we need to make an API call to load those movies then we could also have an interface for movie and then we could have title string date string rating string and description string so we could define an interface just like we did for the header props and we could say for the this property it's going to be a movie object but the problem is because we initialize it to null type script is gonna yell at us the same Knoll is not a movie type so you can tell it hey this can be a movie or null that way you can assign it to Knoll to start then you can actually this should be movies array but whatever I guess this could be movie alright so set movie and movie and this will be a movie object or it'll be null so you can start out with no laughter you load it from your API now you can assign it to a movie otherwise you could only assign it to the value that it's defined as if you just do one of these so you have the ability to up update those another thing you can do and type script is make properties optional so if I define my button text with a question mark this means that it's not a required property and then that means that also if I go over and get rid of the button text and the header previously yelled at us because you can't do that it has to be all the proper all the required properties have to be there since it's no longer required it lets us do that and then we can inside of here we could say button text or whatever text we want click the button so if we don't pass the text it's okay because it's optional then we can just use whatever text on the button that we want to all right I want to go through just give a shout-out to a friend of mine online who has been JavaScript Joe and typescript Joe and now is rusty Joe because he's doing some rest development he's and looking into Russ he's an open source developer advocate at Facebook he wrote this article on site point that you can go through and get a lot more detail about how typescript works with react and I would recommend just for some extra extra content here to go ahead and look through this article it gets really in-depth and there's a lot of stuff that you can see in here and then you'll have that as a resource and then back in here I want to show lastly inside of a brand new create react app project not one that's configured with typescript I want to show how to add it to an already existing create react application and you can do that only create react react abducts you can install all of these things and then you're more or less ready to go so what this is you're installing typescript you're installing the nodes type the react types and the reacts Dom's type as well as just I'm not getting into testing here so I don't need that but what these are are typed definitions for different libraries so if you've ever inside of JavaScript let's see let's open up this thing let's just type document notice that I get intelligence for document and when I click the dot now I see all of the properties and functions that I could call on the document object where that comes from is a strong typing definition for the regular JavaScript browser api's what that means is there's a layer on top of it that defines for all of the JavaScript functions that are available here are the parameter types and the return types and lets me get intellisense inside of es code for those objects now the same type of thing for the libraries that we would use with react the regular javascript libraries like node react and react Dom we want to install the Taipings on top of them so that we get the pure intelligence that we care about with this so what I would do is run npm install so i'll go ahead and run this install command it will install typescript itself and then the Taipings for node react and react tom now one of the things this will allow us to do is to define our components not just as regular functions but actually as react functional components and if we go back to the article by Joe on here if we scroll down you can see there's a couple of different ways to define your components here we go and one is actually these are the two right here let's just copy this it looks like we're still installing our packages I'm just gonna put this down at the bottom and notice right now before we got those typings installed we're getting red on here because it doesn't know exactly what that is it doesn't understand what it is let's pause the video then we'll come back when this is finished installing and those errors should go away alright so we finished installing those packages the errors are still here and the reason is if you hover it'll tell you one it'll tell you what the react node thing is so you can actually see that whole definition there on the screen of react node that object but this is saying this can only be used inside of a type script file which makes sense so you would need to rename every file that you want to use typescript in to a dot tsx extension so we're create react at projects are configured to work with regular JavaScript files for regular JavaScript and then dot TSX files if you're looking to use typescript so now notice these things go away and these are the two different ways that we can define functional components so if we look up at the top this is defining function app now we can add on specifically what is app what is this function so we can paste in to react dot react node this is saying this function is a react node thing okay so we've defined this specifically as a react at react node thing so this function is of type or it will return a type of react react note so this value down here that's what it returns and that thing is a react node so actually if we called app and then just open and close that function this should show us this is returning a react dot react node so you could do that the other way is if you use your function definitions that look like this with arrow functions a function expression so if we said Const app equals and let's get rid of what we just added in a second ago if we did this so there's a reasonable way to define a functional component we can now say this thing returns a functional component but basically it's defining this thing to explicitly be a react functional component and if we call app again it should tell us this thing is looking for some parameters but it's going to return a functional component as you might expect so two different ways to define your components so make sure that they're leveraged the specific Taipings and react you don't have to use this again everything in typescript every piece of JavaScript inside of typescript is valid typescript you can use any of your regular JavaScript then you can add this layer on to determine things like again interfaces for properties or just objects that you're working with you make a call to an API you can define an interface for the data that comes back you can define a classes for the data that comes back parameters variable names using you state hooks all the sorts of things you can do inside a typescript and give yourself more structure inside of your react applications so for me personally I came from before JavaScript a background in Java and c-sharp which are both very strongly typed and JavaScript really kind of scared me for a while because it felt like anything goes you could basically do anything and then you don't know if you have a problem until you actually try to run the code with strongly typed languages you knew what the return types were with the variable types where you couldn't assign anything a wrong type of value and it really had this like preventative these preventive measures from allowing you to mess up which javascript does not have is basically kind of free-for-all so question of the day are you using typescript do you have experience in a strongly typed language how do you think that plays in with JavaScript and do you see yourself moving to typescript in your JavaScript projects at some point in the future so I want to wrap this thing up I want to thank you for checking out the video and I will see you in the next one

Channel: James Q Quick

Views: 29,301

Rating: 4.9015546 out of 5

Keywords: react and typescript, react.js and typescript, react with typescript, setup react with typescript, typescript tutorial, react typescript, react tutorial, web development, typescript vs javascript, react typescript tutorial, react hooks, typescript in vs code, typescript for beginners, create react app, react configuration, react components, react functional components

Id: I9jfsIRnySs

Length: 19min 18sec (1158 seconds)

Published: Tue Mar 10 2020