Use Module Path Import instead of Relative Path Import for typescript projects

TypeScript best practices

Alireza Bonab
Mar 30, 2020 · 3 min read
Image for post
Image for post
Photo by the author.

This is a pretty straightforward tutorial on using module path import instead of relative path import in TypeScript. We’ll also cover getting rid of “../../../” on top of your files.

Problem

If you are a TypeScript or JavaScript developer, you have surely seen these dot slashes (“../../../”) on top of your files. When you import more than two or three components, it becomes a nightmare to figure out which components belong to which module at a glance.

Image for post
Image for post
Relative path import.

There are some solutions, but each of them has cons and side effects to the project structure. For instance, using babel/typescript will result in you losing the *.d.ts files in the output. With webpack, setting up will take a lot of time.

Solution

TypeScript by default supports module import. Unlike with those ugly dot slashes, you can configure module paths in tsconfig.json and then use them for import.

Image for post
Image for post
tsconfig.json.
Image for post
Image for post
Loading using module path.

There is a problem with this: Compiling the TypeScript code to JavaScript makes it unusable by JavaScript. JavaScript does not understand those module paths. Also, tools like ts-node or ts-jest do not understand these module path imports.

There is an npm package (tsconfig-path) that resolves these module imports in runtime and helps JavaScript to run the compiled code. It helps ts-node and ts-jest to understand these components as well.

  • Update the tsconfig.json with the correct path configuration. I use src/* as a single item, but you can use multiples.
Image for post
Image for post
tsconfig.json
npm install --save-dev tsconfig-paths

Note: Use this module to load modules whose locations are specified in the paths section of tsconfig.json. Both loading at runtime and via API are supported.

  • Then simply add two scripts to package.json for development and production:
Image for post
Image for post
package.json configuration.

The command below helps the ts-node to understand the module import:

ts-node -r tsconfig-paths/register src/index.ts

And the command below helps Node/JavaScript understand the module import and be able to run the code:

node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/index.js

Conclusion

That’s it! All you needed to do was update your tsconfig.json with the correct config, which includes paths, then install tsconfig-path and update your package.json file with the correct scripts.

Better Programming

Advice for programmers.

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Alireza Bonab

Written by

Entrepreneur in Spirit, Engineer by Training, Adventurist by Nature

Better Programming

Advice for programmers.

Alireza Bonab

Written by

Entrepreneur in Spirit, Engineer by Training, Adventurist by Nature

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store