Visual Studio 2012 で TypeScript 開発環境を構築

先日、「Visual Studio 2012 で jQuery 開発環境を構築」というエントリを書いたのですが、このタイミングで Visual Studio 使い始めるなら TypeScript を使うのも手かと思い、TypeScript の開発環境も作ってみました。
使ってみると、TypeScript なかなか良い感じです。

Visual Studio Express 2012 for Web のインストール

Visual Studio は個人で使うには高すぎるので、私は無償の Express バージョンを使っています。
後述しますが、TypeScript plugin も Visual Studio Express 2012 for Web に対応しているので問題ありません。

Visual Studio Express 2012 for Web の入手は以下から可能です
Microsoft Visual Studio Express

過去の Visual Studio Express は C++ や C# など言語ごとの提供でしたが、2012 から、使用目的ごとの提供に変わったようです。
TypeScript は Webページ用の言語なので for Web をインストールします。

「今すぐインストール」を押して、ウィザードに従っていくとインストール完了です。

TypeScript editor plugin for Visual Studio のインストール

TypeScript 用のプラグインは以下からダウンロード出来ます。
Welcome to TypeScript

Download the plugin から、最新版のプラグインを取得します。

今回は、0.8.3.1 をダウンロードしてきました。

以下は System requirements です。
Visual Studio Express 2012 for Web が含まれています。ヨカッタ！

TypeScript plugin for Visual Studio のページに載っている System Requirements

インストールはダウンロードしたファイルを実行し、ウィザードに従うと完了です。

プロジェクトを作成

Visual Studio Express for Web を起動して、新しいプロジェクトを作成します。

ファイル → 新しいプロジェクト

プロジェクトの雛形を選ぶウィザードが表示され、これまでになかった TypeScript のテンプレートができています。
それを選択し、プロジェクト名などを、適宜入力します。

コード作成

コードの記述方法は基本的に JavaScript と一緒です。
ただし、ファイル名が *.ts になります。
そして、*.html 内に記述する Scriptタグには *.js で記述する点が異なります。
TypeScript は JavaScript に変換されて実行されますので。

今回は以下のチュートリアルにあるコードを少しだけ変更してみました。^{SyntaxHighlighter には TypeScript の Brush が無いなぁ…}
TypeScript - Tutorial

app.ts

class Student {
    fullname: string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person: Person) {
    return "<h1>Hello, " + person.firstname + " " + person.lastname + "</h1>";
}

var user = new Student("Jane", "M.", "User");

window.onload = function () {
    document.body.innerHTML = greeter(user);
}

default.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="app.js"></script>
</head>
<body>
</body>
</html>

ちなみに、このチュートリアルの app.ts は Java や C# に慣れた人間だと少し違和感を感じます。
Student は Person の実装ではないのに、Person として扱われているなんて変ではないですか。

これは、以下の仕様のためです。

コンストラクタ引数に public を付けると、メンバ変数になる
メンバ変数が一致していれば Interface の実装とみなされる

そのため、Student は暗黙的 に Person の実装になっているというわけです。
記述量が減るのは良いのですが、慣れるまではちょっと戸惑いそうです。

この辺の仕様については、TypeScript Language Specification.pdf に書いてあります。
TypeScript Language Specification.pdf は以下のページの Contibute からダウンロード出来ます^{90ページもあります。自分は、まだ全然読めていないのです…}。

Welcome to TypeScript

実行・デバッグ

実行やデバッグは JavaScript と同様に可能です。

参考

穀風: Visual Studio で Javascript のデバッグ

今回のコードを実行してみると、以下のようになりました。

穀風

Visual Studio 2012 で TypeScript 開発環境を構築

Visual Studio Express 2012 for Web のインストール