Question

我正在尝试在使用webpack，TypeScript和AngularJS（版本1.5）的项目中使用Highcharts及其一些扩展（如“highcharts-more”）。

我已经通过npm（https://www.npmjs.com/package/highcharts）安装了Highcharts，但我无法导入随附的扩展程序。

我正在做的实际技巧是在webpack配置文件中设置一些全局变量

plugins: [
    new webpack.ProvidePlugin({
        Highcharts: 'highcharts',
        HighchartsMore: 'highcharts/highcharts-more',
        HighchartsExporting: 'highcharts/modules/exporting'
    })
]

并手动扩展Highcharts

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

之间没有任何导入。有了这个非理想的解决方案，TypeScript抱怨是因为

error TS2304: Cannot find name 'HighchartsMore'
error TS2304: Cannot find name 'HighchartsExporting'

特别是对于Highcharts，没有错误。我想这与Highcharts是我唯一能够通过

导入的事实有关

import * as Highcharts from 'highcharts';

我可以用webpack配置中的Highchart全局声明替换它。我想要的是以干净的方式导入每个模块，比如

import {HighchartsMore} from 'highcharts-more';

非常感谢任何想法。

Answer 1

如果没有导出变量的定义文件，则会发生此类错误。那些Highcharts扩展仍然需要它们 - 你可能想要阅读更多关于导入模块而没有d.ts的信息：https://github.com/Urigo/meteor-static-templates/issues/9 - 它可能在将来发生变化。

您需要为扩展程序创建d.ts文件。对于highcharts-更多这是我的文件：

/// <reference path="index.d.ts" />

declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;

declare module "highcharts/highcharts-more" {
    export = HighchartsMore;
}

引用路径指向此处的标准DefinietelyTyped Highcharts文件https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts 它允许使用Highcharts.d.ts中的类型，因为初始化将需要正确的类型来初始化扩展名：

HighchartsMore(Highcharts);

最后不要忘记通过在文件中定义tsconfig或编写参考路径来包含所有d.ts文件。

Answer 2

从webpack.config.js中删除这些行：

plugins: [ new webpack.ProvidePlugin({ Highcharts: 'highcharts', HighchartsMore: 'highcharts/highcharts-more', HighchartsExporting: 'highcharts/modules/exporting' }) ]

使用以下方法为高图安装打字文件：

npm install --save @types/highcharts

将导入语句更改为以下内容：

import * as Highcharts from 'highcharts'; import HighchartsMore = require('highcharts/highcharts-more'); HighchartsMore(Highcharts);

导入Highcharts和highcharts-more（AngularJS 1.5 + TypeScript + webpack）

2 个答案: