2012-10-02
TypeScript first impression
MicroSoftから TypeScript というJavaScriptにコンパイルされるプログラミング言語がリリースされた。JavaScriptにコンパイルされる言語はJSX, CoffeeScript, Haxe, Dartなど数多いが、構文がJavaScriptのスーパーセットである点が従来のJavaScript系言語と大きく異なる点だと思われる。
総じて見るとTypeScript自体は際立った特徴は見られない。Visual Studioによるサポートを強化するためにJavaScriptに少しだけ手を入れたという印象だ。
TechCrunchの記事によれば、特徴は「オプショナルな静的型付け」「クラス構文」「モジュール機構」「Visual Studioのプラグイン」ということらしい。
クラス構文は、ES4をベースとしたJSXやHaxeと異なりES6風になっている。モジュール機構の詳細は不明だが、JSの名前空間を侵食しないためのもののようだ。つまり、モジュールMのなかで定義したTSのクラスCは、JSからM.Cとして参照できる*1。
オプショナルな静的型付け+IDEサポートというのはDartに似たアプローチだが、Dartと異なり構文はJavaScriptのスーパーセットである。
インストールは npm install -g typescript で行えるようなので、少し使ってみた。JSXの example/flying-being.jsxを参考にクラスとインターフェイスを書いてみる。
interface Flyable { fly() : void; } class Animal { eat() : void { console.log("An animal is eating!"); } } class Bat extends Animal { fly() : void { console.log("A bat is flying!"); } } // JavaScriptのようにトップレベルに関数を定義できる function takeFlyable(flyingBeing : Flyable) : void { flyingBeing.fly(); } // トップレベルに式を書くこともできる! // つまりmain()のようなエントリポイントは存在しない // また、Batは直接Flyableをimplementsしていないが、 // Flyableに適合するインターフェイスを持っているのでFlyableとみなせる takeFlyable(new Bat);
クラス構文がES6と同じなので特に問題なくコーディングができた。コンパイル後のJavaScriptもデバッグ可能なコードで、クラス継承もいまや一般的となったCoffeeScript同様のproxyを使うパターンである。
ほかいくつか気づいた点をあげておく。
- 型チェックはオプショナル
- 存在しないメソッドの呼び出しはコンパイル時警告
- ローカル変数は型推論される
- つまり
var b = new Bat; b.hoge();は警告される
- つまり
- 関数のパラメータは推論されない(おそらくany扱い)
- したがって型チェックのためには関数のパラメータの型アノテーションは必須
- thisのセマンティクスはJavaScript互換(JSのスーパーセットである以上そうせざるを得ない?)
- つまり
var self = this;イディオムは健在
- つまり
- JavaScriptからはCoffeeScript並に自然に使える
*1:c.f. http://typescript.codeplex.com/SourceControl/changeset/view/d397c54a55db#samples%2fjquery%2fparallax.html
購入: 2人 クリック: 57回
- 296 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC4QFjAA&url=http://d.hatena.ne.jp/gfx/20120520/1337512218&ei=DUdqUNr0HKv3mAXhsYDwBQ&usg=AFQjCNFOnhyTDk-_QclFNV0Ct2j2SpY8wQ
- 272 http://localhost
- 184 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0CEQQFjAC&url=http://d.hatena.ne.jp/gfx/20110505/1304603785&ei=VDpqUIzSL9HSmAWxwYCYDA&usg=AFQjCNE66vfOcTjnnhIBQKEW2pYM9WEUKA&sig2=50drR3Wyz2qYEWx3o-fjlQ
- 131 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&ved=0CEsQFjAD&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=_k5qULq0BeTnmAXI1YGoBg&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw&sig2=0M_ZyMMEWpeAyTCn8V8bNw
- 130 http://www.google.co.jp/url?sa=t&rct=j&q=typescript&source=web&cd=6&ved=0CFMQFjAF&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=fjxqUJSiK-fYigfOuoDIBQ&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw&cad=rja
- 118 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CDsQFjAB&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=AjpqUJfSEMbqmAXMvoCABw&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw&cad=rja
- 52 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&ved=0CFUQFjAF&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=GElqULafMcjnmAW5_IHwDw&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw&cad=rja
- 38 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=4&sqi=2&ved=0CDkQFjAD&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=O2VqUMXLI4bNmAX15YAw&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw
- 37 http://reader.livedoor.com/reader/
- 37 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=8&ved=0CGQQFjAH&url=http://d.hatena.ne.jp/gfx/20121002/1349137808&ei=H05qUMurHOiuiQeN3YGQCQ&usg=AFQjCNF786neNfx_h0_N6zPy2zQt49Bffw&sig2=MBHHCDKrx_LJdc3AW212lw


