I'm trying to use Highcharts with some of its extensions (like "highcharts-more") in a project that uses webpack, TypeScript and AngularJS (version 1.5).
I've installed Highcharts through npm (https://www.npmjs.com/package/highcharts), but I'm not able to import the extensions that come with it.
The actual trick I'm doing is to set some global variables in the webpack config file
plugins: [
new webpack.ProvidePlugin({
Highcharts: 'highcharts',
HighchartsMore: 'highcharts/highcharts-more',
HighchartsExporting: 'highcharts/modules/exporting'
})
]
and extending Highcharts manually
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
without any import in between. With this non-ideal solution TypeScript is complaining because
error TS2304: Cannot find name 'HighchartsMore'
error TS2304: Cannot find name 'HighchartsExporting'
In particular with Highcharts there is no error. Which I guess has to do with the fact that Highcharts is the only thing I manage to import, via
import * as Highcharts from 'highcharts';
which I can substitute with the Highchart global declaration in the webpack config. What I would like is to import every module in a clean way, something like
import {HighchartsMore} from 'highcharts-more';
Any idea is very much appreciated.
This type of error can occur when you do not have definition files for exported variables. Those Highcharts extensions still require them - you might want to read more about importing modules without d.ts here: https://github.com/Urigo/meteor-static-templates/issues/9 - it might change in the future.
You need to create a d.ts file for the extensions. For highcharts-more this is my file:
/// <reference path="index.d.ts" />
declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;
declare module "highcharts/highcharts-more" {
export = HighchartsMore;
}
reference path points to standard DefinietelyTyped Highcharts file from here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts It allows to use type from Highcharts.d.ts because initializing will need proper typing for initializing extension:
HighchartsMore(Highcharts);
And finally don't forget to include all d.ts files by defining tsconfig or writing reference path in your files.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With