导入Highcharts和highcharts-more(AngularJS 1.5 + TypeScript + webpack)

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文件.