TypeScriptとは?

TypeScriptはMicrosoftによって開発されたオープンソースのプログラミング言語だ。JavaScriptに静的な型付けやクラス、モジュールなどのサポートを追加したスーパーセットとなっており、コンパイラによってJavaScriptコードに変換して実行することができる。自由度が高く柔軟なJavaScriptに対し、安全性を高めることで大規模開発でも利用できるというものだ。

図1 : TypeScriptのWebサイト

TypeScriptはNode.jsのモジュールとしてインストール可能なコマンドラインコンパイラだけでなく、Visual Studio 2012用のプラグインも提供されている。このプラグインは無償で利用可能なVisual Studio Express for Webにも対応している。

WebブラウザでTypeScriptを試してみる

TypeScriptは、こちらのPlaygroundでWebブラウザで試すことができる。左側のペインにTypeScriptコードを入力すると、右側のペインにコンパイルされたJavaScriptコードが表示される。

図2 : Playground

このエディタは入力補完やコンパイルエラーの表示など、IDEと同様の機能が利用できる。PCにTypeScriptコンパイラやVisual Studioをインストールしなくても試すことができるため、TypeScriptの学習や特徴を掴むにはちょうどよいだろう。

Visual StudioでTypeScriptを使ってみよう

さて、実際にTypeScriptを使ったWebアプリケーションを開発するのであれば、やはりIDEを使用したいところだ。TypeScriptはVisual Studio用のプラグインが提供されており、静的な型付けを活かした強力な開発支援を受けることができる。

まずはこちらのページからVisual Studio Express 2012 for Webのisoイメージをダウンロードする。Visual Studio Expressはインストール後30日間利用できるが、無償のプロダクトキーを取得することでその後も引き続き利用可能だ。

続いてこちらからTypeScriptのVisual Studio用プラグインをダウンロードし、インストールすれば準備完了だ。

TypeScriptプラグインをインストールすると、以下のようにTypeScriptを使用したWebアプリケーションのためのプロジェクトを作成することができるようになる。

図3 : 新しいプロジェクトの作成

図4 : 作成したTypeScriptプロジェクト

TypeScriptファイルの編集時は静的な型付けを活かしたコード補完やコンパイルエラーの表示など、IDEの恩恵を大いに受けることができる。TypeScriptはJavaScriptのスーパーセットとされているが、感覚としてはJavaScriptよりもJavaやC#でのプログラミングに近いものがあるかもしれない。

図5 : コード補完とコンパイルエラーの表示

なお、TypeScriptファイル(*.ts)は自動的に同じ名前のJavaScriptファイル(*.js)にコンパイルされ、Visual Studio上でもコンパイル結果を確認できるほか、HTMLファイルからも*.jsとしてインポートすることができる。

まとめ

JavaScriptに変換して実行可能なプログラミング言語にはheXe、CoffeeScript、JSXなどすでに様々なものが存在するが、TypeScriptはJavaScriptのスーパーセットであることからすでにJavaScriptを使用したことがあれば学習コストも低く、また既存のJavaScriptライブラリとの相互運用性など実用性も高い。Microsoftが開発しているということもあり、すでにVisual Studio用のプラグインが提供されているなど周辺環境が充実しているのも魅力だ。現状でJavaScriptの代替として利用可能な技術の中ではベストの選択肢といえるのではないだろうか。