ハイパーチャートとハイチャートをインポートする -

Question

webpack、TypeScript、AngularJS（バージョン1.5）を使用するプロジェクトで、Highchartsを拡張機能の一部（「highcharts-more」など）で使用しようとしています。 ）。

ハイチャートをnpm（https://www.npmjs.com/package/highcharts）でインストールしましたが、付属の拡張機能をインポートできません。

私がやっている実際のトリックはWebPACKの設定ファイルにいくつかのグローバル変数を設定することです

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

との間のいずれかのインポートせずに手動で

HighchartsMore(Highcharts); 
HighchartsExporting(Highcharts); 

Highchartsを拡張します。この非理想的な解決策では、

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

と特に不満があります。特にハイチャートではエラーはありません。これは私がHighcharts私はWebPACKのコンフィグでHighchartグローバル宣言に置き換えることができ

import * as Highcharts from 'highcharts'; 

を経て、私はインポートするために管理する唯一のものであるという事実に関係していますね。私が望むのは、すべてのモジュールをクリーンな方法でインポートすることです。

import {HighchartsMore} from 'highcharts-more'; 

どのようなアイデアも非常に高く評価されています。

Answer 1

このタイプのエラーは、エクスポートされた変数の定義ファイルがない場合に発生します。これらのHighcharts拡張モジュールではまだ拡張モジュールが必要です。d.tsを使用しないモジュールのインポートについては、https://github.com/Urigo/meteor-static-templates/issues/9を参照してください。将来変更される可能性があります。

拡張機能用のd.tsファイルを作成する必要があります。 highcharts-詳細はこれが私のファイルです。ここhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts から標準DefinietelyTyped Highchartsファイルへ

/// <reference path="index.d.ts" /> 

declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic; 

declare module "highcharts/highcharts-more" { 
    export = HighchartsMore; 
} 

参照パスポイントの初期化は、拡張子を初期化するための適切なタイピングが必要になりますので、それはHighcharts.d.tsからタイプを使用することができます：

HighchartsMore(Highcharts); 

最後に、tsconfigを定義するか、またはファイルに参照パスを書き込むことによって、すべてのd.tsファイルを含めることを忘れないでください。