D3.js をTypeScriptで使う際に必要になる必要最小限のセットアップ手順。
D3以外のライブラリについても同様にセットアップの参考になると思います。
以下の手順を実行した結果が https://github.com/yohm/minimal_ts_d3 にあるので参考にしてください。
対象読者
- Typescriptに興味があり、試してみたい人
ソフトウェアバージョン
- typescript 1.7.5
- tsd 0.6.5
- d3 3.5.12
事前準備
typescriptのコンパイラ、http-server、tsdをインストールする。
npm install -g typescript http-server tsd
typescriptを導入すると、tscコマンドが使用できるようになる。
http-serverは別のもの（例えばSinatraなど）でも問題無い。
tsd というのは、typescriptの型定義ファイル（~.d.ts）を管理するパッケージマネージャー。
rubygemでいうところのbundlerのようなもの。
DefinitelyTyped のリポジトリからコピーしてきてもよいが、tsdを使った方が管理しやすい
tsdの使い方
tsdを使って型ファイルをインストールすると、インストールされたファイルがtsd.jsonに記録される。tsd.jsonはbundlerでいうところのGemfile.lockに相当するもの。
型定義ファイルの検索
tsd query d3
型定義ファイルのインストール
tsd install d3 --save
--saveオプションをつけるとtsd.jsonを更新する。（bundlerでいえば、Gemfileを編集してbundle installすることに相当）
インストールされたファイルはtypings以下に保存される。
$ tree .
|-- typings
├── d3
│ └── d3.d.ts
└── tsd.d.ts
tsd.d.ts ファイルにインストールしたtsdファイルへの参照（ここではd3.d.ts）が入っている。
自分のコードからはtsd.d.tsを参照するようにしておけば良い。
typingsファイルはリポジトリに入れる必要はないので、.gitignore にtypingsディレクトリを追加しておく。
別の場所でcloneした後は、tsd install とすると必要なファイルがtypingsにインストールされる。
htmlとtsの準備
index.htmlとhello.tsファイルを以下のように準備する。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="/hello.js"></script>
/// <reference path="typings/tsd.d.ts" />
d3.select("body").append("p").text("Hello world!");
htmlからはhello.tsをコンパイルして生成されるJSファイル（hello.js）を参照するようにする。
hello.tsの最初の行には、型定義ファイルへの参照を書く。
tsc hello.ts コマンドでhello.tsをコンパイルするとhello.jsがつくられる。
hello.tsを監視して、更新されるたびにコンパイルするためには tsc -w hello.ts を実行する。
hello.jsはhello.tsからの精製物なので、gitの管理下には入れないように .gitignoreに*.js を追加する。
http-server でサーバーを起動後、 http://localhost:8080 にアクセスするとページを確認できる。