How to Create TypeScript Aliases

Using typescript aliases in imports

Nil Seri
2 min readJan 24, 2021
Photo by Peter Mason on Unsplash

Open your tsconfig.json file.

Set baseUrl value (under compilerOptions) as “src” instead of “.”

Add “paths” under compilerOptions.

Start to add your aliases with their path values relative to “src” folder.

You can replace an import to test in one of your ts files.

You will be getting an error for not being able to find imports so open your “tsconfig.json” file again. When its window is active, for Visual Studio Code Mac users, click “Command + Shift + P” and search for “restart ts server” (you may not see this command when an html file is open on your editor).

Click on it to restart TS server.

After that, you will see the import errors is gone and now it is time to add and replace aliases in your project.

For new imports, when you click to add missing imports, you will see that new imports will be added with aliases (you don’t need to replace paths each time you add a new import).

Happy Coding!

--

--

Nil Seri
Nil Seri

Written by Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏻‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨

No responses yet