Import Highcharts and highcharts-more (AngularJS 1.5 + TypeScript + webpack)

Question

I am trying to use Highcharts with some of its extensions (for example, "highcharts-more") in a project that uses webpack, TypeScript and AngularJS (version 1.5).

I installed Highcharts through npm ( https://www.npmjs.com/package/highcharts ), but I can’t import the extensions that come with it.

The actual trick I am doing is setting some global variables in the webpack configuration file

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

and extension Highcharts manually

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

without any import in between. TypeScript complains about this imperfect solution because

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

In particular, there is no mistake with Highcharts. I think this is due to the fact that Highcharts is the only thing I manage to import, through

import * as Highcharts from 'highcharts';

Highchart webpack. , -

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);

, , d.ts, tsconfig .