How to add absolute paths to your TypeScript Project
Tags: webdev, beginners, typescript, tutorial
Published: 2022-11-22 21:57:45

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](https://reactjs.org/) project with [TypeScript](https://www.typescriptlang.org/) using [Vite](https://vitejs.dev/).

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

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

```bash
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:

![A Vite react typescript project folder content screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6gmholyqw01m8qwlh65.png)

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

```typescript
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:

```typescript
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:

```json
"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:

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

to:

```typescript
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.

```json
"@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:

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