Typescript: "paths" tsconfig

[Music] hello welcome to the dev method my name is ricky let's make our typeskip project easier by adding some paths shortcut paths so today's video is going to be about adding paths to your ts config file so that you can maneuver your components folder maybe a little bit easier for yourself or any other any other really typescript project but we're going to be looking at the next js app that i'm currently building so we'll start there so just as an example i'm going to show you here we have this import from components we also have this import from components this other thing from components so yeah what do we do with them well we always have to remember where we are in the hierarchy so let's let's just say for example um with this particular setup that we have right now i have to go two levels up from the current folder which is right now in the pages folder so in my next.js app that's an actual route that a user can visit and then it goes up two levels and then it's going to go to components and get the components from there so the components are not going to be routes so this pages folder is fine for now but let's just say if i ever wanted to make something that's a nested route like so and then put this in there well watch what would happen see all of these relative imports got updated but it wasn't me it's actually vs code so i guess what i'm trying to say see if i take them away there they are um i guess what i'm trying to say is like we got to make this a little bit easier for ourselves so we don't have to remember all these like relative path things and i think on a project such as this where the components are supposed to be separate from your pages i think it's going to be a great help for you to do this by updating your config file with the paths so if we go to our tsconfig.json in the root of our project structure here we're going to see nothing in here right now under compiler options that says paths so let me just do that now paths and it takes an object and it's key value pairs so the key is going to be what you want it to be called so i'm going to go with something simple i'm just going to say components and anything referencing after components now the value is going to be what actual directory right now am i going to match to so that's going to be the current directory you're in so that's dot followed by slash and then components here components there we go spelled it right now um it's not just a string it actually is an array so there it is there's my little red squiggly telling me that it's wrong just add it as an array and we should be good to go now here notice there's nothing wrong with what we did and actually the app will still like run and compile um here i'll start the dev server there for us to get going but um not gonna be anything wrong with doing it this way uh but if oh let's see if i wanted to do like get this take this out at first it's going to be like oh i don't know what that is go back here and it's like oh but that's your components now oh i forgot one thing gotta do that add the slash the slash job star or asterix and then it will work so here we are components components so you always know it comes from your components now another way to do this as well uh these are all like default uh components here but let's see do i have no i don't have one so now if i want to just do components and then keep all of these in one import just add this on here and index dot ds and we just do an export of all the things that we want to import from so from was it the h1 do h1 there we go and then this should work right okay i figured it out so with the ts config with paths if you're going to specify paths you also have to specify a base url so this could be starting from the root of your project which is just dots which is what i've just done and everything seemed to be working but also you could use like the pages folder i guess or like an src folder whatever you want as your base and here i've done components uh with the star and components without the star and i've gotten it down to this here so this is what i could use on every one of these pages like so and things should be working and i got the compilation to successfully work and if i go to the site and i click to all the different links everything seems to be working so that is what i want to show you so if you guys have any questions about this please let me know i'll do my best to answer in the comments below um and hopefully this helps you guys out if you guys are looking to shorten those paths and try and figure out like where all these things are coming from so you can just do it from the components you can do it with the slash without the slash uh however you guys like so hopefully this made your life a little bit easier and uh if you have anything else that you want me to go over just go ahead and put that in the comments as well and i will do that and uh thanks for watching have a good one

Channel: The Dev Method

Views: 25,106

Keywords: nextjs, react, vercel, paths, tsconfig, components, pages, beginner, getting started, programming, coding, code, html, javascript, css, typescript

Id: i4sorpyHBg8

Length: 6min 8sec (368 seconds)

Published: Tue Nov 30 2021