Visual Studioを使ったTypeScript開発
TypeScriptによるコーディングの基本が理解できたところで、Visual Studioを使った開発の手順を見ていくことにしましょう。Visual StudioはMSDNサブスクリプションを持っていれば、プランに応じて最新のバージョンを利用できますし、さもなければ、無償のCommunity版をダウンロードしても構いません。Community版は2014年11月に公開されたばかりの新たなエディションで、Professional版に相当する機能を無償（注4）で利用できます。
具体的な手順を追っていく中で、Visual StudioのTypeScript対応機能を確認してみてください。
ライセンスの詳細は、上記のページから確認してください。
TypeScript開発のためのプロジェクトテンプレート
TypeScriptを利用した開発を行うために、Visual Studioでは専用のプロジェクトテンプレートを用意しています。［新しいプロジェクト］ダイアログで［TypeScript］－［TypeScriptを利用したHTMLアプリケーション］を選択してください。
これによって、TypeScriptの簡単なサンプルと、これを起動するためのテストページを含んだシンプルなプロジェクトが作成されます。純粋にTypeScriptを利用するならば、まずはこちらのプロジェクトを利用するのが素直です。
もちろん、ASP.NETを利用しているならば、従来の［Web］－［ASP.NET Webアプリケーション］をそのまま選択しても構いません。
TypeScriptファイルの作成 ―― 構文ハイライト／コード補完機能
TypeScriptファイル（.tsファイル）を作成するには、ソリューションエクスプローラーから該当のフォルダーを右クリックし、表示されたコンテキストメニューから［追加］－［TypeScriptファイル］を選択するだけです。［項目の名前を指定］ダイアログが開きますので、例えば「myApp」のような名前を入力して［OK］ボタンをクリックします。
空のmyApp.tsがコードエディターから開きますので、例えば先ほどのリスト1を入力してみましょう。C#／Visual Basicなどを編集する場合と同じく、
- 構文ハイライトが働いている点
- 型に応じて適切なメンバー候補が表示されている点
- 誤った型の値を指定した場合にはエラーが報告される点（赤波線が引かれる）
などにも注目してください。
ちなみに、自作のメソッド（関数）でもあらかじめJSDoc形式のドキュメンテーションコメントを残しておくことで、コード補完時にツールヒントを表示させることができます。例えば、以下はコンストラクターにドキュメンテーションコメントを追加したコードと、その時のコードエディターでの表示です。
/**
* コンストラクター
* @param name 動物の名前
* @param age 動物の年齢
*/
constructor(public name: string, public age: number) { }
タイプ時に引数の意味が分かりやすくなりますので、メソッド／関数などを定義する際には積極的にドキュメンテーションコメントを利用することをお勧めします。
TypeScriptの保存＆実行 ―― 自動コンパイル
コードを入力できたら、
（myApp.tsの保存）ボタンでファイルを保存します。Visual Studioでは、このタイミングで自動的にコンパイルが実施され、myApp.jsとmyApp.js.mapが生成されます。myApp.jsがコンパイル済みのJavaScriptコード、myApp.js.mapがソースマップ（注5）です。
ただし、これらのファイルはデフォルトではプロジェクトには組み込まれません。ソリューションエクスプローラーから
（すべてのファイルを表示）ボタンを有効にするか、標準のエクスプローラーから確認してください。
TypeScriptコードとコンパイル済みのJavaScriptコードをマッピングするための情報ファイルです。ソースマップを利用することで、デバッグ時にもエラー箇所などをJavaScriptコードではなく、元々のTypeScriptコードから確認できます。
TypeScriptのコードを利用するには、該当のページ（.htmlファイル）からコンパイル済みの.jsファイルをインポートします（.tsファイルではありません！）。ここでは、もともとプロジェクトに用意されているindex.htmlに対してmyApp.jsを追加します。
<script>要素は自分でタイプしても構いませんが、ソリューションエクスプローラーからコードエディターに.jsファイルをドラッグ＆ドロップすることで、コードを自動生成することもできます。
サンプルを実行するには、
ボタンをクリックします。ここではInternet Explorerを選択していますが、
から使用するブラウザを選択することもできます。クライアントサイド開発では、クロスブラウザでの動作確認が欠かせませんので、このように統合開発環境からブラウザを簡単に切り替えられるのは嬉しいポイントです。
