DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

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

#typescript #babel #webdev #node

As a response to this post,

andrewmcoupe

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" } }
Enter fullscreen mode Exit fullscreen mode 
// tsconfig.json { "compilerOptions": { "rootDir": "./src", "outDir": "./dist" "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } } }
Enter fullscreen mode Exit fullscreen mode 
// .babelrc { "plugins": [ ["module-resolver", { "root": ["./dist"], "alias": { "@": "./dist" } }] ] }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)