【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順


three.jsに限った話ではないが、開発をする上ではできればコード補完(インテリセンス)を効かせたい。
開発効率も上がるし、タイプミス、それに伴うバグを防ぐことができる。
three.jsでもTypeScriptを使うことによって、コード補完を効かせることが可能。
そのためには、ライブラリのオブジェクトの型を定義した型定義ファイル(.d.ts)をソリューションに追加する必要がある。
以下にTypeScriptによるコード補完を使用したthree.js開発環境の構築手順を記す。

型定義ファイルのインポート

TypeScriptからthree.jsのライブラリを参照するためには、型定義ファイルと呼ばれるファイルが必要。
これは、ライブラリ(ここではthree.js)で定義されているオブジェクトの定義情報を記載したファイルのこと。
TypeScriptからこの情報を参照することで、型判定やコード補完を効かせることができるようになる。

型定義ファイルは、GitHub上の「DefinitelyTyped」と呼ばれるリポジトリに配置されている。
上記はコミュニティ主導のリポジトリではあるが、実質TypeScriptの公式リポジトリである。
TypeScriptから参照したいライブラリがある場合、このDefinitelyTypedリポジトリからファイルをCloneやダウンロードすればよい。

ただし、VisualStudioを使って開発を行う場合はNuGetを使用して、もっと簡単に型定義ファイルの設定ができる。
ソリューションエクスプローラーからソリューションを選択し、「右クリック＞NuGetパッケージの管理」などからNuGetパッケージマネジャーを起動する。
NuGetパッケージマネジャーの検索バーに「threejs DefinitelyTyped」と入力し、「threejs.TypeScript.DefinitelyTyped」をインストール。

ソリューション直下に、Scrripts＞typings＞threejsのようにフォルダが作成され、配下に型定義ファイル(d.ts)が配置されていればOK。

TypeScriptから型定義ファイルを参照する

NuGetから型定義ファイルをダウンロードしただけでは、TypeScriptから参照することはできない。

TypeScriptのファイルに以下のように記述することで、型定義ファイルを参照することができるようになる。

また、直接記述する以外にも、参照元TypeScriptファイルに型定義ファイルをドラッグ＆ドロップすることでも可能。
こちらの方が記述間違いなども起こらないので、特別な理由がない場合は、こちらを推奨。

また、NuGetからインストールしただけだとビルドが通らないので、以下を実施する必要がある。
three.d.tsをソリューションの直下にコピー、その後TypeScriptに型定義の参照設定の記述をする。
Scripts配下のフォルダーをソリューションから除外する。

three.js本体をソリューションに追加

以下からthree.js本体をダウンロード。
https://threejs.org/

ダウンロード、展開すると大量のファイルがあるが、ひとまず必要なのは、build配下のthree.jsやthree.jsなどのファイルのみ。
それらのファイルをソリューションに追加する。
(ソリューションを右クリック＞追加＞既存の項目 から上のファイルを選択)

最終的なソリューション構成は以下のような感じになる。

これでTypeScriptからコード補完を使用しながらthree.jsのコーディングが可能になる。

参考

Visual StudioとTypeScriptでJavaScriptライブラリを活用する – Build Insider
[TypeScript][WebGL][Three.js] 3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～ ― 準備編 (プログラミング C# – 翔ソフトウェア (Sho’s))

---

---

広告