Whenever working in TypeScript, we deal with importing and exporting modules in our project. This quick post is just a reminder/tutorial for how to set up a base path so that we may reference these modules in a more organized fashion.
Let's begin by creating a new project. We could just create a basic TypeScript app but let's create something a little more practical. We'll be creating a simple NextJS app that uses TypeScript. This is a pretty popular stack these days since it provides a full stack environment with the (current) most popular view library.
To start, let's navigate to a directory to make our project and run the following command.
npx create-next-app base-path-example --ts
This will build out a new Next app called base-path-example
with a directory structure that looks like this:
Inside of this project, we're going to include a deeply nested path by adding a few directories inside of pages.
This is going to illustrate what happens when we have to bring in a component from way higher up in the directory tree. Here's what our deeply nested page looks like:
import { Counter } from "../../../../components/counter";
export default function CounterPage() {
return (
<div>
<Counter />
</div>
);
}
Notice that we're bringing in this Counter
component from the components
directory which is four levels up. While this certainly works, it's a little difficult to read and in an app with dozens, or even hundreds of pages, these ../
pieces get annoying to deal with.
To solve this issue, we can make a quick and easy update to our tsconfig.json
file which will simplify our imports throughout our entire app. Inside of tsconfig.json
, add the following:
// tsconfig.json
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
This gives us a shorthand to reference the src
directory. So now on any of our imports, we can just start with @
. Now we can revisit that deeply nested page and make the following change:
import { Counter } from "@/components/counter";
export default function CounterPage() {
return (
<div>
<Counter />
</div>
);
}
Now we can reference all directories and files relative to the src
directory! This avoids all of the backtracking with ../
! As small of a change as this may be, it will save TONS of time with imports and help your code look a lot cleaner in the process.
SIDE NOTE FOR FULL-STACK/API PROJECTS
If you are building something with ts-node
or nodemon
, you also need to follow this section of the ts-node
docs.
Top comments (0)