如何从模块导入中单独导入类型定义？

Question

我试图理解类型定义(来自明确类型)和实际模块导入之间的联系。

让我们以ECharts库为例。它有不同的“风格”，可以从它的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不会受到影响。