オンラインエディタも割と高機能
話題のMicrosoft製JavaScriptコンパイル言語のTypeScriptのコードを試すには下記リンクのオンラインエディタで気軽にコードが書いて結果を見ることができる。型を指定すれば、型に合ったコードヒントが表示される上、コンパイルエラーがあれば、赤い波線で教えてくれ、なかなかの高機能エディタとして使うことができる。
でもSublime Text 2で書きたい
トップページを見ると、なにやら「Visual Studio 2012 Developers can install the TypeScript editor plugin to get rich TypeScript tooling」まさかVisual Studio用のプラグインしか無いのか?と一瞬焦ったが、よ〜く見るとother editors availableと書いてある。期待してリンクを除くと。。あった。良かった。Sublime Text 2 / Emacs / Vimのサポートが用意されている。
なんだかMicrosoftがモダン
トップページで雲がプカプカしていたり、インストールをnpmで提供したり、パララックスのサンプルを用意したり、Sublime Text 2をサポートしたり、ドキュメントをWordファイルで用意したり。
Windows 8 のUIといい、最近中にお洒落さんがいるに違いない。
Sublime Text 2にTypeScriptのシンタックスを認識させる
Sublime Text, Vi, Emacs: TypeScript enabled! – Interoperability @ Microsoft – Site Home – MSDN Blogs
上記のリンクからSublime Text 2のアイコンをクリックすると.tmlangageというファイルが入っているzipが落とせる。ちなみにこのページはmsdnだ。解凍したフォルダ名をTypeScriptにして下記の場所に入れて、Sublime Text 2を再起動する。
~/Library/Application Support/Sublime Text 2/Packages/
TypeScriptコードがしっかりカラーリングされる
Cmd + Shift + PでCommand Paletteを出して(出ない場合はTools > Command Palette)、syntax TypeScriptと入力してみると見事カラーリングされる。
保存時に自動で拡張子をつけてくれる
Sublime Text 2は新規ファイルを各言語用のSyntaxをセットすると、保存時にセットした言語の拡張子を自動で付記してくれる、TypeScriptも例外ではなく、上記の通りインストールが完了していれば.ts拡張子を付記してくれる。
せっかくなのでTypeScriptをコンパイルする
なんの意味もないが、せっかくなのでSublime Text 2で書いたgreeter.tsをコンパイルする。任意の場所に置いたGreeterディレクトリでコンパイルする前提とする。
cd Greeter tsc greeter.ts
tsファイルと同名のgreeter.jsが吐き出された。後はこのjsを読み込むHTMLを用意しておしまい。