Ugly imports in TypeScript (Solved)

I hope you are doing well.

When I review code from TypeScript projects, I often see ugly and long imports, like so:

typescriptimport LoadingButton from "../../../../../components/LoadingButton"

Depending on how deep your folder structure is, those kinds of imports can quickly get out of hand.

There must be a better way to import in TypeScript.

Of course, there is, using alias paths.

Using alias paths, you can map an alias to a path, resulting in short and convenient import statements.

Here is how to make it work:

1. Set the baseUrl option to "." in your tsconfig.json file.
2. Add your aliases to your tsconfig.json file.

That's it! You can now import using aliases from anywhere in your project tree!

Here is how the import looks now:

typescriptimport LoadingButton from "@components/LoadingButton"

Cool right?

Articles

Here is the latest article on the blog:

• How to fix the "unlink of file failed" error in Git?

Thank you for reading.

See you next week!

Tim M.

written by:

Tim Mouskhelichvili

Hello! I am Tim Mouskhelichvili, a Freelance Developer & Consultant from Montreal, Canada. I specialize in React, Node.js & TypeScript application development. If you need help on a project, please reach out, and let’s work together.

Contact Me