DEV Community

Cover image for How to add absolute paths to your TypeScript Project
Sean Yasnogorodski
Sean Yasnogorodski

Posted on

How to add absolute paths to your TypeScript Project

In every project we've got to import something. It can be a file from somewhere else from the project or it can be a node module. Today I'm going to teach you how to become a pro at importing files and import a file the right way.

What do we need?

First, we need a TypeScript project. If you use a JavaScript project, then you need to add TypeScript to it. I'm going to create a new React project with TypeScript using Vite.



npx create-vite-app example --template react-ts


Enter fullscreen mode Exit fullscreen mode

Since Vite doesn't install node dependencies automatically, we need to install it ourself.



cd example
npm i


Enter fullscreen mode Exit fullscreen mode

After it will install all node dependencies in our project, we can open the project and start coding.

Coding an example

If you know what you're doing, you can skip this section and move on to the next section. If you're a beginner, you should continue reading and follow the example.

Let's create a utils folder inside src directory. Inside utils folder create a new file and call it index.ts. It should look like this:

A Vite react typescript project folder content screenshot

Now let's create a function inside index.ts file:



export const addition = (first: number, second: number): number => {
    return first + second;
}


Enter fullscreen mode Exit fullscreen mode

Now create a components folders and move App.tsx inside. After that open App.tsx file and try importing addition function from utils. You'll get something like this:



import { addition } from '../utils';


Enter fullscreen mode Exit fullscreen mode

Our goal is to avoid all these ../ dots so we would have a very simple import that we can just copy and paste it without changing something throughout the project.

Creating our first absolute path

Open tsconfig.json file and go into "compilerOptions" section. At the end of the section add the following:



"paths": {
    "@utils/*": ["src/utils/*"]
}


Enter fullscreen mode Exit fullscreen mode

And that is it! You created your first absolute path! You can back to App.tsx and change the import from:



import { addition } from '../utils';


Enter fullscreen mode Exit fullscreen mode

to:



import { addition } from '@utils/index';


Enter fullscreen mode Exit fullscreen mode

But let's go back for a second. Let's take a part the line that we added inside "paths" section in tsconfig.json file.



"@utils/*": ["src/utils/*"]


Enter fullscreen mode Exit fullscreen mode

The name @utils is actually the prefix that we want to call before something we want to import from the utils folder. We can call it however we want. if we change @utils/* to @shrek/*, than every time we import something from the utils folder, it will look like this:



import { addition } from '@shrek/index';


Enter fullscreen mode Exit fullscreen mode

Inside the array we have src/utils/*. We actually specify in this array all the files we'd like to import using the prefix we have defined.

And that's basically it! That's how you can add absolute paths into your project and make your imports much more shorter and much more satisfying!


I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)

Top comments (2)

Collapse
 
igortas profile image
Igor Tashevski

And this is not how it works in case of monorepos, plus paths overwrites each other...

Collapse
 
seanyasno profile image
Sean Yasnogorodski

You still can use that way in monerepos... Each service in the monorepo should have it's own tsconfig so you can add absolute paths to be inside each project.