如何在TypeScript声明中使用Webpack别名

Question

我正在用TypeScript编写NPM程序包，但找不到在TypeScript声明中转换Webpack别名的方法。

webpack.config.js

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

tsconfig.json

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

我将babel-loader与@babel/preset-typescript一起使用，但是它不输出声明文件。

tsc --emitDeclarationOnly发出声明文件，但不会用正确的路径替换@/。与ts-loader相同。

我可以使用moduleNameMapper在Jest中使用它。如果我可以使用它来构建声明文件，则不再需要编写诸如../../../../model之类的东西。

我在网上找到的大多数答案都是关于编译JavaScript文件的，我对此没有任何疑问。任何帮助将不胜感激。

Answer 1

我终于找到了解决方案。您需要ttypescript和typescript-transform-paths。您将以下内容添加到compilerOptions中的tsconfig.json

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

并运行

ttsc --emitDeclarationOnly

我为此写了一个article。

Answer 2

2021 年更新的答案

不，我们不能在声明文件中解析路径别名。 ttsc 曾经是一个选项，但它没有维护 2 年，而且最新版本的 ttsc 看起来与 TypeScript 4 及更高版本不兼容。请参阅此issue。

编写相对路径仍然是进行 TypeScript 包开发的唯一方法，因为 TypeScript 团队仍然拒绝在 tsc 上正式支持它。