http://www.typescriptlang.org/Playground で遊びたおして TypeScript のことをとっても気に入ったけど、じっさいに自分のプロジェクトで使いはじめるために何をどうすればいいのかわからずにアワアワしてた昨日の自分と、忘れっぽい明日の自分へ贈るメモ。
ともかくツールの揃え方だけ。
それぞれの詳しい使い方はググったりわかめさんの本買ったりしてください。
Node.js
いろんな導入方法があるので省略。各自お好きな方法で。
ぼくはnodebrewでインストール。
Grunt.js
Grunt.js は Node.js を実行基盤とする JavaScript のビルドツール。たぶんmakeのようなもの。
プロジェクト毎に異なるバージョンのGrunt.jsを使い分けられるよう、
環境にインストールするクライアントと、プロジェクトローカルにインストールする本体とにパッケージが分かれている。
Gruntクライアントツールのインストール(グローバル)
$ npm install -g grunt-cli
.bash_profile
に以下を追記(bashの場合)
PATH=$(npm prefix -g grunt-cli)/package/bin:$PATH
Grunt本体のインストール(プロジェクトローカル)
$ npm install grunt --save-dev
TypeScript
インストール(プロジェクトローカル)
$ npm install typescript --save-dev
プロジェクトの外でTypeScriptコンパイラをふだん使いしたいならグローバルインストールも実施しておけばいいかも。
$ npm install -g typescript
TSD
オンラインで公開されている各種JavaScriptライブラリの型定義(.d.ts)を検索・入手するツール。
インストール(プロジェクトローカル)
$ npm install tsd --save-dev
プロジェクトが必要とする型定義を記述する tsd.json
の雛形をあらかじめ生成しておく
$ ./node_modules/.bin/tsd init
grunt-typescript
TypeScriptのコンパイルを実行するGruntタスク
インストール(プロジェクトローカル)
$ npm install grunt-typescript --save-dev
grunt-tsd
tsd による型定義(.d.ts)の更新を行うGruntタスク
インストール(プロジェクトローカル)
npm install grunt-tsd --save-dev
型定義(.d.ts)の入手
tsd
コマンドを使って node.jsの標準ライブラリとwsモジュールの型情報を入手してみる。
$ ./node_modules/.bin/tsd query node
- node/node.d.ts : <head> : XXXX-XX-XX XX:XX
$ ./node_modules/.bin/tsd query ws
- ws/ws.d.ts : <head> : XXXX-XX-XX XX:XX
それぞれ、node/node
ws/ws
という名前であることがわかったので、実際にこれらをダウンロード、インストールする。(--save
オプションによってtsd.jsonへの追記も行われる)
$ tsd query node/node --save --resolve --action install
$ tsd query ws/ws --save --resolve --action install
型定義の利用
取得したすべての型定義への参照は typings/tsd.d.ts
に集約されるので、自分のコードには次の行を挿入するだけ。かんたん!
/// <reference path="../typings/tsd.d.ts" />
Gruntfile
Grunt でコンパイルや型定義の更新を自動化しよう。
Gruntfile.js (Makefileのようなもの)を次の内容で作成。(コンパイルオプションやパスは適宜読み替えよう)
module.exports = function(grunt) {
grunt.initConfig({
typescript: {
main: {
src: ['ts/**/*.ts'],
dest: 'js',
options: {
basePath: 'ts',
noImplicitAny: false, //true,
module: 'commonjs',
target: 'es5',
comments: true
}
}
},
tsd : {
refresh: {
options: {
command: 'reinstall',
latest: true,
config: './tsd.json',
opts: {}
}
}
}
});
grunt.loadNpmTasks('grunt-typescript');
grunt.loadNpmTasks('grunt-tsd');
grunt.registerTask(
"default",
"TypeScriptをコンパイル",
["typescript:main"]
);
};
grunt
で TypeScriptのコンパイル、grunt tsd
で型定義の更新が実行されるはず。
困ったときは?
ダウンロードした型定義の間違いに気づいたら自分で直して https://github.com/borisyankov/DefinitelyTyped にプルリクすればあなたもわたしもみんなも幸せ。