Next.js Tutorial - Part 3 | TypeScript Migration

hello YouTube today we are going to migrate our JavaScript application into typescript but before we look into code let me share with you the migration strategy I usually like to follow and in order to follow that migration strategy we need to create a dependency graph per screen or per entry point and if we look into our last week's application we have four entry points and those are the entry points we have so one per screen then we need to pick one of those entry points let's say we pick the first one and we will get all the child's from it recursively and create them the diagram of dependencies so how does it look like let's say we have a page which is the initial screen you have and that page is built by a list and a list item and then the list item is only using for example HTML tags or even a component from material UI for example so in the point of view of your application this is a leaf component it doesn't call any other components from your application so we have the dependency tree or the dependency graph from this screen you can start the migration looking into list item then you migrate list and after that you migrate page why I don't advise you to start on page and go down to list item because if you start on page then you are still consuming components that are not types typescript or they don't have types yet so then migration will be a bit painful for you but if you start from list item and you go up then every single level that you go up you start to see the benefits of having types but it's up to you whichever way you want to go it's okay for today we are doing starting from this title and going up okay but let me just show you one more example let's say that we have on the left one profile and on the right the vehicles of that same profile okay so that person and imagine that we have a material UI table we have some cars photos over there then we have a farm with farm ik and this person is also inside the car right so what what should we we do in terms of the graph so let's start by the screen or the root and we have the user profile page itself then on the Left we have a person detail and on the right another component called vehicle list those two components depend on a material current and why is this material card green well materially why already provides definitions for you so the dds files are already inside material when you npm install it so every single component that is already typescript compliant we will mark it green the next one is the photo and the photo is from our application itself so this component is not green yet the next one is formic and luckily formic already ships with DDS files as well so we are good to go on that one the next one is axis and axe used like material and forming already ship with DTS files so we are okay on that one as well the last one is you and sadly you doesn't have any definition files for typescript but we are in luck because there exists types already for loop in NPM so we can just npm install types slash yep and that one becomes green immediately the next one we can start from vehicles list and vehicles list in order to load that table will need axes as well so there we have that dependency the next one is the material table to show the list then we have vehicle list item which refers the material table as well and also the photo because on the right of that table we add the photos now we have the dependency tree or the dependency graph from this screen it's completely here on the screen and as I explained to you before I will start from the Leafs so the first component I will start to migrate will be photo after we migrate photo we migrate person detail then we can't go up anymore because vehicles list is not migrated yet so let's see what's the child the deepest child of vehicle list and in this cases vehicle list item so we migrate that one then we go up the tree we migrate vehicle list and after that we can migrate the user profile itself and after this we have one screen of our application that is fully typescript then we can start to pick all the other screens of the application do exactly the same dependency graph migrate them and do that until we reach the end so now we can go to vs code and start to migrate our application from JavaScript to typescript even though it will be much simpler than this one that I showed you right now in order to follow our strategy we will go to our leaf components and rename them from dot J's to dot tsx then type sweet we'll start to complain about some errors and we will fix them as we go when the leaf components are migrated we can start to go to the root level components okay so our leaf component and the one we are going to start this on page is we can come here and just say homepage that tsx you will see that now typescript starts to complain because we don't have types yet we will install them in a second so let's close this one for now come to index dot J yes and we can see that index dot yes is only exporting on pages the tsx so we can just safely rename this one to tsx and the same to this one because it's only exporting the own page so renaming those three files is the beginning of our journey now if we try to run next next we'll throw some errors because the types are not installed the ones that I said before and if you look the messages quite good the message from next it says that we need to install those packages so we can come here copy/paste and install them and while that one is installing it's a good time for you to look into your dependency tree where you see all the dependencies and check if any of those squares is yellow at the moment which means that you need some Taipings if you need those Taipings it's now a good moment to go to npm or even to get up calm slash definitely typed and check if you can find those definitions if not probably you will have to make them yourself but the chances of you not finding those Taipings is quite small so look around go to stack overflow and you will find them okay so now that those are installed we can run again and this time next year's will create a TS config dot JSON for us as you can see here in the message okay and this TS config dot JSON is quite good let's just kill the server for now it's quite good it has a lot of good defaults for us the only one that I will change is district from false to true okay and changing that one behind the scenes we enabled a lot of other flags one of them is no implicit any okay but you can go to the typescript website and check how many other flags these enables it's a lot of them okay so type suite will yell at you a lot of the times but it's something that we want when we migrate the typescript right so now that our simple components are migrated you can even see that now this edge one is typed typescript knows what it is and so vs code is showing you these nice pop-up explaining what that is the next component we need to migrate or we should migrate is this list Jas and this list dot yes we can start by renaming it to list TSX and we can also remove these comments we left from the previous lesson that we don't need anymore okay now that we remove those you can see immediately that after we rename the file from Jas to TSX that pipe script starts to complain a lot and vs code shows the errors for us and even here at the bottom you can see that this method dot JSON from our fetch is returning a promise of any so it will be good first to type that one before we do anything else so let's call it vehicle person for example okay and if you remember from last week we have vehicle owner name and details so let's create an interface with those details which is strained the owner name is also a string okay and we have the vehicle type very code which is also a string now that we have that one we can come here and say that we will receive a vehicle awry or undefined okay because our server can just return undefined which is perfectly fine if they do ok and we can now see offering over here that our get initial props is returning an owner's list that can be a vehicle person array or undefined so this is starting to get some types to us right let's go at the top and in order to make this bit piped usually the convention is to create an interface and call this interface the name of your component in this case we will call it list and we add props okay props from properties and the funny thing here is when I do this and I call it vehicle not called when I make this off type vehicle person and pass it here list props okay now look at what happens when I have owners list okay it immediately knows that it's that pipe so if I do this okay I can immediately say details on their name and vehicle if for some reason I miss type vehicle and I type it like that type script will immediately correct me saying well that property doesn't exist Bruno so fix it something's wrong and this is really powerful when your team starts to grow and you start to have more and more developers it's really really powerful and out 'full to everybody it even works as kind of documentation for everybody okay so this one can be undefined so we just put that and this component after we format looks fine looks like we migrated this one successfully let's just run to make sure that everything was still working or is still working okay let's open our browser and if everything went fine and we do slash whoops lock allows three thousand slash Liston okay let's just wait for the previous page to load and that one let's just put list and it should be compiling so yeah let's just give it a bit and we will go back at it in a second so this list is still working everything looks like it's still working the previous page is still working and the on page is also working so the only page is that we need to migrate now is our details page which is for example slash airplane slash bill gates and this page even though it will work it's still done in normal JavaScript so let's just go here and rename this person that is two person dot tsx ok and renaming that probably next we'll even file so let's just kill it we can adopt exactly the same thing we did before and if you remember we are using exactly the same interface for data so we can even go here create a new folder called for example API oops I already had that folder over here new file and call it vehicle person dot TS okay and now we export this one we can import it in the list ok and going to our person dot tsx we can do exactly what we did before so interface and now person which is the name of our component plus props ok and we have owner list of vehicle person which is an array or undefined if you don't want to type this or undefined all the time okay you can just put this question mark over here and it's exactly the same thing okay so I'm sometimes putting slash and defined other times I use the question mark so but they are exactly the same thing okay so over here we just need to pass person props okay and doesn't exist on person props why ah okay another good thing about typescript we are calling it honors list and here we only have honor list so it's in reality honors list and now the warning disappears which is quite good so if you see here even our owners now it as a proper type it has a type of vehicle personal right or undefined okay and it's coming from this question mark so as you can see it's propagating well so the propagation is correct so let's just copy this one and we will do the same thing in this JSON okay so let's do or undefined and because we are doing this over here and on get initial props we can do exactly the same thing over here so we do two in one so now the next error from this component is telling us that oh this object can be and defined and it's actually true this object can be undefined so we found a bug just by using typescript on itself the same for this one so it can be and define that the right and okay so we fix it and so as you can see we are already solving a lot of bugs just because we are using typescript right the next problem that we can fix is this context and this context comes from next pages or page page context okay and if you see here now we can even see everything that exists inside that context something that before if you remember I had to open the next documentation in order to see so just not having to open the next documentation and search for what I want and having it immediately here in vs code you can imagine that is a big productivity boost for you and for the colleagues in your team so on top of that I don't even know what I did this last week because this bit here can be simplified to query over here directly right and the same for this rack so we can just do these and remove this line okay oops and it's much cleaner now I would say so now that we did this bit we can even do something a bit bigger because if you see when we are using query okay imagine we are using query and we don't have any helpers we can type wherever we want and pipe script has no way to validate them because the object inside our next context page okay oops why did I open that our context over here if we go to query okay is the part URL query and the part URL query is nothing more nothing less than whatever key you provide we will always type it as string or an array of strings and that's not actually what we want for this specific one so we can create an interface for this specific one and call it interface I'm really bad with naming so I will call it my next page context okay extends next page context okay next page context and we will override the query by itself and in the query we can have person which is just a string and we will have vehicle which is also just a string okay and doing that nothing will happen yet because I'm not using that one but when I just paste this one you will see that immediately type script knows that well that property doesn't exist at all Bruno so you did something wrong Bruno fix it please and yes we can fix it and on top of them you can see that now we have auto complete or intellisense or whatever you want to call it to this query so we know that query only receives person and vehicle now and in our case it was person yes it was person and this component is also fully migrated to typescript at the moment okay now let's run the application and see if our newly migrated component is also working like the previous two or the previous three sorry that we created and so we opened so many pages Bruno so many clicks so when that one loads and it will take probably a few seconds for it to load we should see the list of vehicles and people and clicking in one of those we should navigate to the next page and everything should be just there right so I will just fast forward this for you okay we got an error so what happened okay so ah okay reloading worked um so now that that we got that one we can click in for example john doe's bike and clicking in john doe's bike we will see that we now receive that we can go back click in any other person for example Allen musk we see the loathing and then we get the detail like we had last week the only difference is that now everything is typed okay and that's really powerful for you and for your team's productivity so I hope that much more than this code by itself but the initial part about the strategy will help you migrate whatever application you have in JavaScript to typescript so if you have a different a strategy that you usually follow and gives you good results leave in the comments and I will learn something with you and we can have a nice discussion so next week we will have API routes so I hope to have you over there like the video subscribe to the channel and see you next week bye bye

Channel: Bruno Antunes

Views: 22,228

Keywords: javascript, react, next.js, ReactJS, ReactJS Tutorial, ReactJS Tutorial for Beginners, Next.js Tutorial, Nextjs Tutorial, Nextjs for beginners, React next, React Next.js, React nextjs, react next js, server side rendering, ssr, react server-side rendering, react ssr, next ssr, javascript tutorial for beginners, javascript for beginners, typescript, typescript for beginners, typescript migration, migrate to typescript, next.js typescript, next typescript, nextjs typescript

Id: v3lI29trIN8

Length: 19min 46sec (1186 seconds)

Published: Mon Mar 02 2020