Mac + Sublime Text2 + node.jsでTypeScriptのビルド環境を作る

俺自身にもそんなに需要ないんだけど、PCが直らずやる事が無いので、暇潰しにやったことをメモ。
ちなみにmacは英語モードで使っているため、アプリケーションとかの表記が日本語じゃない点ご容赦を。

node.jsを入れる

installボタン押す → ダウンロードされたものをひたすらnext。

typescriptのコンパイラを入れる

node.jsが入ると、ターミナルでnpmコマンドが使えるようになっているので、Finder -> Applications -> Utilities -> Terminal.appでターミナルを起動し、黒い画面以下を入力。

sudo npm install -g typescript

adminのパスワード求められるので適当に入れて実行。

これでもう入っているので、TypeScript公式で推奨されるこのHello Worldをhello.tsとかの名前で作って、

class Greeter {
    constructor(public greeting: string) { }
    greet() {
        return "<h1>" + this.greeting + "</h1>";
    }
};
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;

このコマンドを実行。

tsc hello.ts

hello.jsが出来てればok。

Sublime Text 2を入れる

Sublime Text2は、なんかtypescriptが推しているので入れてみようかなと。
継続して使う分には$59だからちょっと考えちゃうけど、まあ試用してから後で考えればいいやということで、とりあえず突っ込む。
ここから、
http://www.sublimetext.com/

Download -> OS X
でダウンロード。なおOS 10.6か10.7が必要。
ダウンロードしたら、二つアイコンが並んでいると思うので、Applicationsじゃない方のアイコンをドラッグしてApplicationsに突っ込めばインストール完了。

Finder -> Applications -> Sublime Text 2.appで起動。

Package Controlの導入

Sublime Text 2はインストールを簡単にしてくれるものがあるらしいので、そいつを入れる。
Sublime Text 2を起動して、メニューからView -> Show Console
でコンソールを起動して、画面下になんか入力するところがあるので、この長い文字を突っ込んでEnter。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

一応、軽くエラーっぽい事言ってないか確認して、Sublime text 2を再起動。
メニューのSublime Text 2 -> Preferencesのところに、Package Controlって出てれば成功。

TypeScriptの環境を入れる

あとはPackage Controlからインストールするので、Sublime Text 2 -> Preferences -> Package Controlで開いて、"Package Control: Install Package"ってのを選択。
色々あるけど、今回はTypeScriptなので、TypeScriptってまんまの名前のものを選択してインストール。

再起動不要。
後は.tsのファイルを開けば勝手にハイライトされる。

その他の設定

色々設定すると便利だよって人が多いけど、俺は今日Sublime Text 2を初めて触っているのでパスします。
Sublime Text 2の詳しい設定方法は適当に他を回って探してくれってことで。

Sublime Text 2上でのコーディングと試しのビルド

Sublime Text 2はプロジェクト単位での管理に向いている（らしい）ので、プロジェクト単位で開発するよう準備しよう。
新しいフォルダを一個作る -> それをSublime Text 2にドラッグする、で、勝手にプロジェクトとして読み込んでくれる。
らくちん。

あとはCommand + Nか、メニューのFile -> New Fileで新しいファイル開いて、さっきのhello.tsでももう一回作る。

んで、コンソールからまたこれやればいいんだけど、

tsc hello.ts

Sublime Text 2はビルドが簡単に出来る事が売りなので、それは勿体ないよねと。

正直Sublime Text 2全然調べてないので、ここの記述怪しいけど、とりあえずこのURLで偉い人達がしゃべっている内容を元に、適当にコピペしてビルド環境も作っちゃおう。
https://gist.github.com/3814020

メニューのTools -> Build System -> New Build Systemってやって、以下の内容をコピペ。

{
    "cmd": ["tsc","$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$",
    "line_regex": "\\((\\d+),(\\d+)\\)",
    "selector": "source.ts",
    "osx": {
       "path": "/usr/local/bin:/opt/local/bin"
    }
}

保存して、名前を聞かれるので、拡張子を替えずにTypeScriptとかの名前にして保存。拡張子込みだと「TypeScript.sublime-build」。

あとはさっきのHello worldっぽいtsを開いて、Tools -> Build、でok。
念のためhello.js削除してからもう一回実行して、ちゃんと出来る事確認するといいと思われ。

このビルドのところって、別に{"cmd": ["tsc","$file"]}だけでも動くんじゃないのって気もするけど、まあよくわからん内は偉い人たちに逆らわないでおこうということで。

以上。
さあTypeScriptはじめよう。えーと、まずはチュートリアル、チュートリアル、、、と。

2013年06月10日追記

TypeScriptファイル単体を使うのではなく、ビルド用ファイルを使うなら単にこうすればいい。

{
    "cmd": ["tsc","@build.txt"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$",
    "line_regex": "\\((\\d+),(\\d+)\\)",
    "selector": "source.ts",
    "osx": {
       "path": "/usr/local/bin:/opt/local/bin"
    }
}

build.txtのところがビルドファイル名。
jgame.jsなんかは上記の設定でビルドしている。