d3（v4）をASP.NET MVCアプリケーションのtypescriptにインポートするにはどうすればよいですか？

Question

私はVisual Studio 2015でASP.NET MVCアプリケーションを構築し、いくつかのjavascriptライブラリを含んでいます。 jQueryの最も重要な部分はd3（一部のページではv4と部分的にv3）です。 今、私はTypescriptを掘り下げます（これはかなり新しいです）。

詳細を知る前に、私は、JSからTSに切り替える最も簡単な方法は何ですか？また、moment.js、d3.js、およびその他の依存関係をどのように扱うのですか？

残念ながら、私の.tsファイルにd3モジュールを含めることができません。 import * as d3 from 'd3';

また、タイプ定義ファイルを手動でプロジェクトにロードし、npm（npm install @types/d3 --save-dev）でダウンロードしてみました。彼らのどれも働かなかった。おそらく、私はそれがうまくいくか誤解しているのだろうか。

この問題が解決した直後に、私はAMDまたはCommonJSにも対処する必要があります。私のプロジェクトにいくつかの追加インストールを必要としない簡単なソリューションを提案できますか？

私は十分に正確ではなかった場合は、事前に多くのおかげで申し訳ありません（それは私の最初の質問です）。

Answer 1

import * as d3 from 'd3';あなたはnode_modulesにローカルでのみ利用可能なd3パッケージが必要なため、ブラウザでは動作しません。これは依存関係の破損（例えばwebpack）が入ったもので、必要なパッケージをすべてあなたのコードで読み込んでビルド出力に含めます。しかし、Node.jsとTypeScriptが初めてだと言ったので、これらのツールを使ってプロジェクトを設定することは非常に難しく、学習曲線はかなり急峻です。プロジェクトのニーズを調査し、ある時点で必要になることがわかったら、後でコードを適用するとさらに苦痛になる可能性があるため、webpack ASAPを使用する方法の学習を開始してください。

もう一つの選択肢は、jQueryとD3.jsを（通常のスクリプトタグを使用して）旧式の方法で組み込むことです。このシナリオでは、TypeScriptがjQueryとD3を別々に読み込んでいるときでさえも、これを "周囲宣言"と呼んでいます。これらの宣言は、これらのライブラリのグローバル変数の下で定義を公開するので、TypeScriptは、実行時にグローバルd3または$変数が利用可能であり、私たちが望むライブラリのAPIを保持すると仮定します。したがって、importは必要ありません。

"@ types/jquery"と "@ types/d3"の両方には既にこれらのグローバル宣言が含まれています。 D3の場合、v4の定義をインストールしていることを確認してください。npm i --save-dev @types/d3@4.x

tsconfig.jsonファイルでは、バニラ依存関係の使用に必要な手順がいくつかあります。 moduleとmoduleResolutionとpick the optionsより良いスーツあなたに

{ 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "moduleResolution": "classic", 
    "sourceMap": true, 
    "baseUrl": ".", 
    "types": [ 
     "d3", 
     "jquery" 
    ] 
    } 
} 

ご注意：ここでは例です。また、typesオプションに注意してください。TypeScriptには、周囲の宣言（@types/d3と@types/jquery）が含まれています。これらのオプションは、そのままTypeScript 2.0用です。

正直なところ、それぞれのコンテキストが異なる設定が必要なので、すべての作業を行うために必要なことを正確に言うのは難しいです。しかし、私は少なくともあなた自身が残りの部分を把握するために正しい方向にあなたを得たことを願っています。がんばろう！