导入 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 文件。

Answer 2

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

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

使用这个为 highcharts 安装类型文件：

npm install --save @types/highcharts

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

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