How I simplified my import paths in TypeScript

I think as developers using ES modules we have all got to a point where import paths start to become ugly and unmaintainable - especially in large codebases.

With a couple of lines added to your tsconfig.json we can fix this.

Let's imagine we are importing a button into a file which is nested far away from the components directory.

import Button from '../../../components/button'

This doesn't look too bad but it can get quite annoying if you're having to do this regularly.

Jump over to your tsconfig.json and reach into your tool belt.

We can add a paths property to our tsconfig.json. By doing this we also need to add a baseUrl which our paths will use as a base.

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
          "@components/*": ["components/*"]
        }
    }

}

Now we can use these paths in our application. @components will now map to src/components/*.

So our button import from before can now be used like so.

import Button from '@components/button'

It doesn't look like much but in a monorepo this improves your workflow and efficiency as a developer.

A short but hopefully helpful post for some importers out there.

Comments

[Adam Crockett 🌀]

Just a note about monorepos, look at tsc -b package1/tsconfig.json package2/tsconfig.json its helpful.

[Nishchal Gautam]

IDEs might get confused with this, if you're using an editor worth its salt, it should be able to do auto imports anyway.

[Adam Crockett 🌀]

It's needed for the Typescript compiler to understand packages that sit in sibling arrangements that are not resolvable in node style resolution. I use webstorm which is salty haha.

[Pacharapol Withayasakpunt]

Actually, it is resolved in VSCode, because it is also Microsoft's product.

[Ryan Dsouza]

But wouldn't Node complain after we transpile TS, as Node doesn't know about absolute paths?

[Pacharapol Withayasakpunt]

tsc will automatically resolve it.

ts-node and ts-node-dev currently won't, but can be fixed with -r tsconfig-paths/register.

[Ryan Dsouza]

Doesn't work. Created a simple example with absolute imports and then compiled it via tsc. On running node dist/index.js the compiled JS throws an error as the absolute paths are not resolved.

[Andy Coupe]

Let's see your example buddy?

[Pacharapol Withayasakpunt]

It can be fixed via babel-plugin-module-resolver, though. Actually, Babel can do much more than tsc, and typescript can run under it as well.

Only just it doesn't help with the IDE.

[Ryan Dsouza]

I have two files:

src/index.ts

import { add } from 'utils/math'

console.log(add(2, 3))

src/utils/math.ts

export const add = (a, b) => a + b

My tsconfig.json - the rest is omitted

{
  "baseUrl": "./src",
  "paths": {
     "*": ["*"]
  }
}

After transpiling this to JS, it doesn't work just by calling node dist/index.js, where dist is the output folder. So the baseUrl is just for TypeScript as Node doesn't understand that.

[Pacharapol Withayasakpunt]

Now I really need to compile to JavaScript as you mentioned.

I summed up the solution, but not exactly that pretty.

TypeScript, simplified import paths, and what you have to be careful

Pacharapol Withayasakpunt ・ Jul 23 ・ 2 min read

#typescript #babel #webdev #node

[fullstackcoder]

That's a good one, I used it before. Although, personal feeling, the barrels (index.ts) is a better approach.

[Andy Coupe]

You can use it with barrels 👍

[Jonas Grøndahl]

Didn’t know about this, thanks!!