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

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

cd example
npm i

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:

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

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

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';

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/*"]
}

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';

to:

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

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/*"]

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';

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 :)

Comments

[Igor Tashevski]

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

[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.