如何与模块导入分开导入类型定义？

Question

我正在尝试理解类型定义（来自 Definitely Typed）和实际模块导入之间的联系。

我们以ECharts库为例。它有不同的 "flavors"，可从其 dist 文件夹中获得。在 npm install echarts 之后它包含例如：

node_modules/echarts/dist/echarts.js
node_modules/echarts/dist/echarts.min.js
node_modules/echarts/dist/echarts-en.js
node_modules/echarts/dist/echarts-en.min.js
...

另外安装 @types/echarts 允许通过

导入它

import * as echarts from "echarts";

这在生成的 JS 和类型定义方面都很好。但是图书馆的语言是中文。一般的解决方案是导入库的 echarts-en 风格，它是相同的，只是使用不同的语言定义文件。这可以通过切换到：

import * as echarts from "echarts/dist/echarts-en";

生成的 JS 可以正常工作，现在语言是英语。然而，TypeScript 编译器现在抱怨它不知道此导入的类型定义：

Could not find a declaration file for module 'echarts/dist/echarts-en'. '/home/<user>/<path>/node_modules/echarts/dist/echarts-en.js' implicitly has an 'any' type.
  Try `npm install @types/echarts` if it exists or add a new declaration (.d.ts) file containing `declare module 'echarts/dist/echarts-en';

安装 @types/echarts 似乎还不够。我如何告诉 TypeScript 从 "echarts/dist/echarts-en" 导入模块，但使用匹配 "echarts" 导入的类型定义？

Answer 1

在 TypeScript 文件中，您应该保留 echarts 模块的原始导入定义：

import * as echarts from "echarts";

从 echarts 到 node_modules/echarts/dist/echarts-en.js 的路径重新映射是捆绑软件的任务。

例如，使用 Webpack，您可以在 resolve 部分的 webpack.config.js 中添加别名：

module.exports = {
  //...
  resolve: {
    alias: {
      echarts$: path.resolve(__dirname, 'node_modules/echarts/dist/echarts-en')
    }
  }
};

这会在您的捆绑文件中将 import * as echarts from "echarts" 重新映射到 echarts-en.js，而 TypeScript intellisense 不会受到影响。

如何与模块导入分开导入类型定义？

How to import a type definition separately from module import?

typescript

echarts