DEV Community

How I simplified my import paths in TypeScript

Andy Coupe on July 17, 2020

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 ...

Read full post

Adam Crockett 🌀 • Jul 17 '20

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

Nishchal Gautam • Jul 17 '20

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 🌀 • Jul 17 '20

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 • Jul 17 '20

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

Ryan Dsouza • Jul 17 '20

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

Pacharapol Withayasakpunt • Jul 17 '20 • Edited

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 • Jul 17 '20

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 • Jul 17 '20

Let's see your example buddy?

Pacharapol Withayasakpunt • Jul 18 '20 • Edited

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 • Jul 18 '20

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.

fullstackcoder • Jul 18 '20

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

Andy Coupe • Jul 18 '20

You can use it with barrels 👍

Jonas Grøndahl • Jul 18 '20

Didn’t know about this, thanks!!