miso_soup3 Blog

主に ASP.NET 関連について書いています。

JavaScript で TypeScript 型定義ファイルに基づくインテリセンス(Visual Studio 2017)

Visual Studio 2017 では、TypeScript を使用しなくても、JavaScript だけを書いていても、 自動で該当する TypeScript 型定義ファイルを取得し、TypeScript のようにインテリセンスを表示します。

参照:Visual Studio 2017 RC で JavaScript 開発がより生産的に – Visual Studio 日本チーム Blog

以下の図のように、TypeScript ファイルや .tsconfig ファイルが無い、ただの JavaScript ファイルを配置したプロジェクトを用意します。 そして、jQuery ライブラリを追加します。

f:id:miso_soup3:20170320153734p:plain

site.js にて、「$.a」とタイプすると、jQuery の .d.ts を参照したインテリセンスが表示されます。

f:id:miso_soup3:20170320154211p:plain

メソッドのところで F12 を押すと、型定義ファイルに移動し、表示します。

f:id:miso_soup3:20170320154631p:plain

型定義ファイルは、%LOCALAPPDATA%\Microsoft\TypeScript に格納されており、私の環境ではC:\Users\hoge\AppData\Local\Microsoft\TypeScript\node_modules\@types なので、そこを開くと、ちゃんと実ファイルがあります。

f:id:miso_soup3:20170320154926p:plain

例えば、プロジェクト内に新たに「d3.min.js」(グラフのライブラリ)を追加したとすると、

f:id:miso_soup3:20170320155044p:plain

先のフォルダには、このように型定義ファイルが取得されています。

f:id:miso_soup3:20170320155124p:plain

もちろん(?)、型定義ファイルとは違う書き方をしても、エラーが表示されたりはしません(通常の JavaScript ファイルでの開発と同じ挙動)。 フォルダを削除しても、Visual Studio でプロジェクトを開くと再度取得されていました。

JSDoc の強化もされており、JavaScript だけの開発においても、TypeScript のような補助が得られます。