Fix index.d.ts import paths with one bash command

Alright, so you’ve decided to do something nice and shiny, and now you’re working on the JavaScript library, which is actually written with beloved TypeScript, aren’t you? Very well.

Source: https://bonomi.io/blog/the-bonomi-tech-stack/

The problem with paths

Let’s skip all the development steps and land when everything is already fine. Your polished code is working and well tested. All your components and helpers have types. The build is running green, and so index.d.ts
being generated as well. And… you use absolute imports paths for your own reason.

tsconfig.json with baseUrl example
Code editor can’t resolve absolute import paths without baseUrl
Code editor resolves absolute import paths with baseUrl
index.d.ts generated with absolute paths
Relative paths in the library root
Relative paths in the library generated index.d.ts file

Well, gotcha!

The problem is fixed on the root level, but not completely. If some of the nested files use absolute import — it is the same story, it would not resolve.

Nested absolute import not being resolved

Shall we give up here? NO! And many times NO!

CLI tsc-alias, to the rescue!

tsc-alias is a tool that would replace all absolute imports with relative imports. For you. Automatically.

yarn add tsc-alias -Dornpm install tsc-alias --save-dev
Added build: aliases script

Summary

tsc-alias is a neat tool for the job. Especially, when you don’t want or just can’t add any builder configs (Webpack, Rollup, etc). This was the case for me since the library has managed with create-react-library boilerplate.

Engineering Your Breakthrough