Visual Studio Community 2013をインストールした。これが無料！？信じられない。ほぼ会社で使っている環境と変わらない。
TypeScriptはマイクロソフトが作っただけあって、Visual Studioとの連携は完璧だ。IntelliSenseも使えるし、デバッグもブレークポイントの設定もVS上でできる(ただしブラウザはIEに限る)。しかもTypeScriptのままで。もうこれは、C++やC#と全く同じ感覚で使えるね。仕事でやってることと一緒だ。
さらに驚くべきは、TypeScriptで作ったコードは、コンパイルして完璧なJavaScriptに自動変換されるということだ。

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};

たとえばプロジェクトを新規作成すると標準で付属しているこのコード。0.5秒ごとに時刻を更新する時計プログラムだ。クラス定義や型定義、アロー矢印など独自の定義が使用されている。これをブラウザで実行したときのソースは

var Greeter = (function () {
function Greeter(element) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
Greeter.prototype.start = function () {
var _this = this;
this.timerToken = setInterval(function () {
return _this.span.innerHTML = new Date().toUTCString();
}, 500);
};
Greeter.prototype.stop = function () {
clearTimeout(this.timerToken);
};
return Greeter;
})();
window.onload = function () {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
//# sourceMappingURL=app.js.map

こうなる。すげー。クラスはちゃんとクロージャ内に収まってるし、start()内の this 識別子も _this 変数に代入することでjavascriptでも正しく動作するように解決されている。っていうか、生の javascript って、書き方めんどくさいよねぇ。。
詳しい記事は以下にもあります。
TypeScriptとは？ Visual Studioを使って開発してみよう – Build Insider

Tweet