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智能感知将不受影响。

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

1 个答案: