How to use Webpack alias with TypeScript Declaration

Question

I am writing a NPM package with TypeScript but I could not find a way to convert Webpack alias in TypeScript Declaration.

webpack.config.js

{
  // ...more Webpack configurations
  resolve: {
  extensions: [".ts", ".js"],
  alias: {
    "@": resolvePath("src")
  }
}

tsconfig.json

{
  "compilerOptions": {
    // More options
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

I am using babel-loader with @babel/preset-typescript but it does not output declaration files.

tsc --emitDeclarationOnly emits declaration files but it does not replace @/ with correct path. Same for ts-loader.

I am able to get it working in Jest with moduleNameMapper. If I can get it working building declaration files, I not longer need to write somethings like ../../../../model.

Most of the answers I found online is about compiling JavaScript files, which I don't have a problem with. Any help will be appreciated.

Answer 1

I finally find a solution. You need ttypescript and typescript-transform-paths. You add the following to compilerOptions in tsconfig.json

"plugins": [
  { "transform": "typescript-transform-paths", "afterDeclarations": true }
]

and run

ttsc --emitDeclarationOnly

I wrote an article on this.