angularjs - 导入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-more，这是我的文件:

/// <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 文件。