Path Aliases in TypeScript and why you should use them

Well, a normal way to start this article would be talking about path aliases and their story… and once the reader (you) is bored, I would start talking about how to implement them in our beloved projects.

But I hate that kind of post, I like that when I don't know something (or I don't remember it), I can just enter the right post in my Google search and find the answer. And later, once I have finished my task, I will just learn more about those concepts (which are interesting but not today's topic).

So… let's honor that, and let's make this post something useful for you.

Path Aliases

The easier way to explain something is with an example. Remember some messy project that you have on your hard drive. One with several components. And even a few components inside one component folder.

Now, remember when you try to import it.

It looks like this, isn't it?

Did you notice that dots' nightmare? Imagine if now you could change it to something like this:

That is a path alias! It allows you to reference any file no matter where it is in the project by always using the same "path" (in this case, I set a path alias for the components folder containing my components as @components).

How can you use it?

There are several ways depending on what you are using: the plain old Javascript, Typescript… and it can be different (or with extra steps!) if you use some framework like Vite!

So, let's explain how to use path aliases in Typescript.

Imagine you have a project structure like the following one:

Let's update your tsconfig.json file.

If you don't find it, it is in the root directory of your project, and it contains the Typescript settings for your project.

Your file will look something like this (don't copy my settings, it might break your project! Better, follow this guide and understand what you are doing!):

To make our path aliases work in Typescript,** we need to add two keys in the file: "baseUrl" and "paths."**

"baseUrl" is used to let typescript will be the original path (the root path) from where the alias path will start.

"paths" is just an object containing different keys mapping each alias path you want to use.

So, let's say you want to add an alias path to the modules folder, so you can just do something like:

We will modify our tsconfig.json to look like this:

Save it, and… you are done! It is just that easy! But wait, before you close the article and go back to code, if you want to know more extra settings and tricks for this, continue reading (it won't be too much, and you will discover a whole new world!).

How can I use path aliases in Javascript?

You can! You just need to edit (or create if it doesn't exist) the jsconfig.json file in the root directory of your project (you can read about that file here, but basically, it is really similar to the one we use in Typescript projects).

Except for the different files you need to modify (the jsconfig.json instead of the tsconfig.json file), every other step is the same whether you are in a Javascript project or in a Typescript project.

What if I need to use those aliases in tests or in a bundler or…?

You could make it work by yourself, but… instead of spending some time figuring out how to do it (feel free to do it if you want or have time for that), I recommend you to check this amazing package (Alias HQ) which is free and basically uses your tsconfig.json or jsconfig.json file to setup everything for you and make really easy to configure all those more advanced needs.

How to use path aliases in…?

I am getting a few more posts about how to set up path aliases in other places, and I will update this article with links to them once they are published!

By the way, if you want to get the latest threads and posts I publish, feel free to follow me on my Twitter @thenaubit. See you there!