TypeJavaの外部Javascriptライブラリの宣言のためのSystemJSコンフィグレーション

Question

私はAngular2とTypescriptの新機能です。 私は優雅にjsの外部ライブラリを使用する方法を見つけたい：

declare var somelibrary: any; 
somelibrary.doAnithing(); 

しかし、私はいくつかのtypizationを持ちたいので、私は* .d.tsの使用hereを読む：私は使用することができ、私が知っている

export declare class Chart { 
    constructor (ctx: any); 

    Doughnut(data: any, options: any): Function; 
} 

は（私もしてみてください:)

export declare module 'chart' { 
    export class Chart { 
     constructor (ctx: any); 

     Doughnut(data: any, options: any): Function; 
    } 
} 

：

は、だから私は、モジュールchart.d.tsを作成します

と、さまざまな方法しようと、それを参照：

// version 1 
import chartFactory = require('../chart'); 
// version2 
import { Chart } from '../chart'; 

し、それを使用します。

// version 1 usage  
new chartFactory.Chart(ctx).Doughnut(this.chart1, {responsive : true}); 

または第二のインポートのために：

// version 2 usage 
new Chart(ctx).Doughnut(this.chart1, {responsive : true}); 

コンパイルがをsuccedsが、上ランタイムSystemJS js実装をロードしようとしています'path/to/chart.js'を検索しています（実際はchart.jsはありません。元のライブラリはスクリプトタグでインポートされています）。 、について説明して

System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

ヒント：

SystemJSの構成は、角度のチュートリアルと同じですか？

私は失敗したloockupの原因は"module": "system"だと思いますが、問題は：SystemJSの解像度と競合することなく内部dtsを行う方法ですか？

Answer 1

あなたが探しているものは周囲のモジュールです。それについてはhereハンドブックで詳しく読むことができます。

あなたは（chart.d.tsで）このようなものを宣言することができます

declare module "chart" { 
    export class Chart { 
     constructor (ctx: any); 
     Doughnut(data: any, options: any): Function; 
    } 
} 

をそして、あなたはこのようにそれを使用することができるはずです。

import {Chart} from "chart"; 

let c = new Chart(1); 

注：これは、チャート関数がグローバルコンテキストで使用可能であることを前提としています。

あなた自身の.d.tsファイルをすべて宣言する必要はありませんが、役立つツールもあります。 typingsまたはtsdのようになります。

Answer 2

たとえば、値の位置でchart.jsの書き出しを使用しています。その型だけでなく、TypeScriptはモジュールを翻訳する際にそれを依存関係として出力します。問題は、chart.jsがローダで使用できないことです。 あなたのSystemJSコンフィグレーションで地図またはパッケージのいずれかに宣言することをお勧めします。 'path': 'path/to/chart.js'を開き、スクリプトタグを削除します。あなたには、いくつかの理由でスクリプトタグを使用する必要がある場合

は、あなたはまた、CDNまたは何経由chart.jsをロードするようにSystemJSを設定することができ

export interface Chart { 
    new (ctx: any); 
    Doughnut(data: any, options: any): Function; 
} 

ノートに自分の型宣言ファイルを変更します。

私はスクリプトタグを避け、適切なモジュールとして読み込みます。これは役に立ちましたでしょう： http://www.chartjs.org/docs/#getting-started-installation