TypeScriptをASP.NET MVCに組み込む #TypeScript

今回はASP.NET MVCにTypeScriptを組み込んでみます。
環境はVisual Studio 2015です。

ASP.NET MVC サンプル作成

まず、ファイル->新規作成->プロジェクトでプロジェクト作成画面を開きます。
そして、ASP.NET Web アプリケーションを選択します。

今回はEmpty、MVCを選択します。

空のMVCなため構成はこんな感じです。

空でなんもないんでControllers配下にHomeController.csを追加します。

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TypeScriptSample.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

対応するViewをViews/Home配下に追加しましょう。

Index.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>

これでソリューションを実行すれば下記画面が表示されるはずです。

TypeScriptを組み込む

先ほど作成したサンプルにTypeScriptを組み込んでみましょう。
まず、ソリューションを右クリックし、追加->新しいフォルダでTypeScriptを置くフォルダを作りましょう。
フォルダ名は何でもいいです。

追加したフォルダを右クリックし、追加->TypeScriptファイルでTypeScriptファイルを作成します。

app.ts

class Person {
    private name: string;
    public getName(): string {
        return this.name;
    }
    constructor(name: string) {
        this.name = name;
    }
}

window.onload = function () {
    const p = new Person("Hoge");
    alert(p.getName());
}

ソリューションをビルドするとjsにトランスパイルされます。

画面にapp.jsへの参照を追加しましょう。

Index.html

<!DOCTYPE html>

<html>
<head>        
    <script src="~/ts/app.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>

準備は整いました。

ソリューションを実行すると下記画面が表示されるはずです。

以上、TypeScriptをASP.NET MVCに組み込むの回でしたー