TypeScriptをVisual Studioで使う。

先日、MicrosoftからTypeScriptという言語がリリースされました。

窓の杜 – 【NEWS】Microsoft、プログラミング言語“TypeScript”を公開。VS 2012向けのプラグインも

近頃、乱立しているJavaScriptを出力する言語です。
JavaScriptを出力する言語はすでにCoffeeScript, Dart, Haxe, JSXなどがあるわけですが、TypeScriptが魅力的なのが以下の点。

  1. すべてのJavaScriptはTypeScriptであり、JavaScriptライブラリの利用が簡単。
  2. 文法がActionScript3.0(EMCAScript4)に近く、厳密な型指定が可能。
  3. 有力なIDE(Visual Studio 2012)がサポートしている。

これ全部満たしてる言語っていままで無かったんじゃないでしょうか?
とりあえず、Visual Studioの使い心地がどんなものか気になるので、インストールして試してみました。ちなみにOSはWindows7。

Visual Studio Express 2012 for Webをインストールする。

以下のページで”日本語”を選択して、”今すぐダウンロード”をクリック。

ダウンロード | Microsoft Visual Studio 2012

ファイル形式がISOなので、WinCDEmuを使って仮想ドライブにマウントします。
WinCDEmuインストールと使用方法は以下を参考にします。

小さいけど十分便利。ISOなどを仮想ドライブにマウントできるツール WinCDEmu

今回はポータブル版を使用しました。

先ほどダウンロードしたvs2012_webexp_jpn.isoを右クリックして、Select drive letter & mountを選択してWinCDEmuを使用。

仮想ドライブが認識されたら実行。

あとは表示される指示にしたがってインストールすればOKです。

試しにHTMLを作成してみます。

Visual Studioってこんなだっけ?
知らない間にずいぶんサッパリしたんですね。

TypeScript for Visual Studio 2012をインストール

続いてTypeScriptのプラグインをインストールします。

まず、以下からTypeScriptSetup.0.8.0.msiをダウンロード。

Download: TypeScript for Visual Studio 2012 – Microsoft Download Center – Download Details

ダウンロードしたファイルを実行すれば簡単にインストールできます。
インストールが成功すると、Visual Studio Express 2012 for Webファイル>>新しいファイルを選択すると、Web>>スクリプトの欄にTypeScriptが加わっています。

TypeScriptを使う

プロジェクトを作成した時のコンパイルの設定方法を紹介。
いちいちコマンドプロンプトを呼び出してコンパイルするのはメンドクサイので、ファイル>>新しいプロジェクト>>Vidual C#でASP.NET 空のWebアプリケーションを選択。作成したWebアプリケーションのプロパティを開いて、ビルド前にTypeScriptのtsファイルのコンパイルを実行するように設定しておきます。

こうやって設定しておけば、htmlファイルとtsファイルを作ってF5を押すだけでTypeScript -> JavaScriptのコンパイルしてブラウザでhtmlを開くところまで一発でやってくれます。ラクチンですね。

■試しに書いてみたスクリプト

Visual Studio 2012ですが重いわけでもないですし、入力補完もバッチリきいて、型推論もやってくれるのでなかなか使いやすいです。HaXeも良かったんですが、小さいコードならTypeScriptの方が書きやすそうな印象でした。

あと、MicroSoft製だからMac向けの開発環境のサポートはないんでしょ、と思ってたんですがSublime Text, Vi, Emacsでシンタックスハイライトが使えるらしいです。

Sublime Text, Vi, Emacs: TypeScript enabled!

追記(2012/10/11)
新しいプロジェクトにHTML Application with TypeScriptっていうプロジェクトがありました。これ使うと上みたいなコンパイルの設定をしなくていいみたいです。

TypeScriptをVisual Studioで使う。」への1件のフィードバック

  1. ピンバック: TypeScript入門(インストール) | 雪猫ノート

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です