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

As a response to this post,

How I simplified my import paths in TypeScript

Andy Coupe ・ Jul 17 '20

#typescript

Simplified import paths are easy for IDEs, especially VSCode, but hard for resolvers and Node.js itself.

So, you will need some additional packages,

• tsconfig-paths
• Babel

So, I had to put more things in package.json

{
  "scripts": {
    "run-ts": "ts-node -r tsconfig-paths/register -O '{\"module\":\"commonjs\",\"noImplicitAny\":false}'",
    "run-ts-dev": "ts-node-dev -r tsconfig-paths/register"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "babel-plugin-module-resolver": "^4.0.0"
  }
}

// tsconfig.json

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
    "baseUrl": "./",
    "paths": {
      "@/*": [ "src/*" ]
    }
  }
}

// .babelrc

{
  "plugins": [
    ["module-resolver", {
      "root": ["./dist"],
      "alias": {
        "@": "./dist"
      }
    }]
  ]
}

Yes, it seems that you have to type out the aliases twice. Also, the syntaxes are a little different.

Now, for the essential commands,

yarn run-ts scripts/migration.ts
# or npm run run-ts -- scripts/migration.ts to run a short running scripts, e.g. migration

yarn run-ts-dev src/server.ts
# or npm run run-ts-dev -- src/server.ts to run a long running scripts, e.g. server

rimraf dist && tsc && babel dist -o dist
node dist/index.ts
# Yes, you can use Babel just to resolve paths. Babel onto itself as well.

# This is also possible.
rimraf dist && tsc
node -r tsconfig-paths/register dist/index.js

There is one big problem. @babel/preset-typescript is not using tsconfig.json; therefore, Microsoft's Babel starter is just not enough. It doesn't recognize additional features like experimentalDecorators...

Never mind, it seems that I can tsc first, then babel onto itself.

• This will make experimentalDecorators work without an explicit Babel plugin. I think Babel is a configuration hell.
• I think TypeScript compiler already do much of what Babel supposed to do.
• There is another gotcha, though. tsc doesn't remove the old directory / output. So the solution is rimraf dist first.