選擇 File
選擇 New Project
選擇 Visual C#
選擇 ASP.NET Web Application

http://wiki.jikexueyuan.com/project/typescript/images/new-asp-project.png" alt="Create new ASP.NET project" />
選擇 MVC

取消復選 "Host in the cloud" 本指南將使用一個本地示例。 http://wiki.jikexueyuan.com/project/typescript/images/new-asp-project-template.png" alt="Use MVC template" />

運行此應用以確保它能正常工作。

添加 TypeScript

下一步我們?yōu)?TypeScript 添加一個文件夾。

http://wiki.jikexueyuan.com/project/typescript/images/new-folder.png" alt="Create new folder" />

將文件夾命名為 src。

http://wiki.jikexueyuan.com/project/typescript/images/src-folder.png" alt="src folder" />

添加 TypeScript 代碼

在 src 上右擊并選擇 New Item。接著選擇 TypeScript File 并將此文件命名為 app.ts。

http://wiki.jikexueyuan.com/project/typescript/images/new-item.png" alt="New item" />

添加示例代碼

將以下代碼寫入 app.ts 文件。

function sayHello() {
    const compiler = (document.getElementById("compiler") as HTMLInputElement).value;
    const framework = (document.getElementById("framework") as HTMLInputElement).value;
    return `Hello from ${compiler} and ${framework}!`;
}

構建設置

右擊項目并選擇 New Item。接著選擇 TypeScript Configuration File 保持文件的默認名字為 tsconfig.json。

http://wiki.jikexueyuan.com/project/typescript/images/new-tsconfig.png" alt="Create tsconfig.json" />

將默認的 tsconfig.json 內容改為如下所示：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "outDir": "./Scripts/App"
  },
  "files": [
    "./src/app.ts",
  ],
  "compileOnSave": true
}

看起來和默認的設置差不多，但注意以下不同之處：

設置 "noImplicitAny": true。
特別是這里 "outDir": "./Scripts/App"。
顯式列出了 "files" 而不是依據(jù) "excludes"選項。
設置 "compileOnSave": true。

當你寫新代碼時，設置 "noImplicitAny" 選項是個好主意 — 這可以確保你不會錯寫任何新的類型。

設置 "compileOnSave" 選項可以確保你在運行web程序前自動編譯保存變更后的代碼。

更多信息請參見 the tsconfig.json documentation。

在視圖中調用腳本

在 Solution Explorer 中, 打開 Views | Home | Index.cshtml。

http://wiki.jikexueyuan.com/project/typescript/images/open-index.png" alt="Open Index.cshtml" />

修改代碼如下：

 @{
     ViewBag.Title = "Home Page";
 }
 <script src="~/Scripts/App/app.js"></script>
 <div id="message"></div>
 <div>
     Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
     Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
 </div>

測試

運行項目。
在輸入框中鍵入時，您應該看到一個消息：

http://wiki.jikexueyuan.com/project/typescript/images/running-demo.png" alt="Picture of running demo" />

調試

在 Edge 瀏覽器中, 按 F12 鍵并選擇 Debugger 標簽頁。
展開 localhost 列表, 選擇 src/app.ts
在 return 那一行上打一個斷點。
在輸入框中鍵入一些內容，確認TypeScript代碼命中斷點，觀察它是否能正確地工作。

http://wiki.jikexueyuan.com/project/typescript/images/paused-demo.png" alt="Demo paused on breakpoint" />

這就是你需要知道的在ASP.NET中使用TypeScript的基本知識了。接下來，我們引入Angular，寫一個簡單的Angular程序示例。

添加 Angular 2

使用 NPM 下載所需的包

安裝 PackageInstaller。
用 PackageInstaller 來安裝 Angular 2， systemjs 和 Typings。

在project上右擊, 選擇 Quick Install Package。

http://wiki.jikexueyuan.com/project/typescript/images/packageinstaller-angular2.png" alt="Use PackageInstaller to install angular2" /> http://wiki.jikexueyuan.com/project/typescript/images/packageinstaller-systemjs.png" alt="Use PackageInstaller to install systemjs" /> http://wiki.jikexueyuan.com/project/typescript/images/packageinstaller-typings.png" alt="Use PackageInstaller to install Typings" />
用 PackageInstaller 安裝 es6-shim 的類型文件。

Angular 2 包含 es6-shim 以提供 Promise 支持, 但 TypeScript 還需要它的類型文件。

在 PackageInstaller 中, 選擇 Typing 替換 npm 選項。接著鍵入 "es6-shim"：

http://wiki.jikexueyuan.com/project/typescript/images/packageinstaller-es6-shim.png" alt="Use PackageInstaller to install es6-shim typings" />

更新 tsconfig.json

現(xiàn)在安裝好了 Angular 2 及其依賴項，我們還需要啟用 TypeScript 中實驗性的裝飾器支持并且引入 es6-shim 的類型文件。將來的版本中，裝飾器和 ES6 選項將成為默認選項，我們就可以不做此設置了。

添加"experimentalDecorators": true, "emitDecoratorMetadata": true選項到"compilerOptions"，再添加"./typings/index.d.ts"到"files"。

最后，我們要新建"./src/model.ts"文件，并且得把它加到"files"里。

現(xiàn)在tsconfig.json應該是這樣：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./Scripts/App"
  },
  "files": [
    "./src/app.ts",
    "./src/model.ts",
    "./src/main.ts",
    "./typings/index.d.ts"
  ]
}

添加 CopyFiles 到 build 中

最后，我們需要確保 Angular 文件作為 build 的一部分復制進來。這樣操作，右擊項目選擇 'Unload' ，再次右擊項目選擇 'Edit csproj'。

在 TypeScript 配置項 PropertyGroup 之后，添加一個 ItemGroup 和 Target 配置項來復制 Angular 文件。

<ItemGroup>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2-polyfills.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\systemjs\dist\system.src.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\rxjs\bundles\Rx.js"/>
</ItemGroup>
<Target Name="CopyFiles" BeforeTargets="Build">
  <Copy SourceFiles="@(NodeLib)" DestinationFolder="$(MSBuildProjectDirectory)\Scripts"/>
</Target>

現(xiàn)在，在工程上右擊選擇重新加載項目。此時應當能在解決方案資源管理器（Solution Explorer）中看到node_modules。

用 TypeScript 寫一個簡單的 Angular 應用

首先，將 app.ts 改成：

import {Component} from "angular2/core"
import {MyModel} from "./model"

@Component({
    selector: `my-app`,
    template: `<div>Hello from {{getCompiler()}}</div>`
})
class MyApp {
    model = new MyModel();
    getCompiler() {
        return this.model.compiler;
    }
}

接著在 src 中添加 TypeScript 文件 model.ts:

export class MyModel {
    compiler = "TypeScript";
}

再在 src 中添加 main.ts：

import {bootstrap} from "angular2/platform/browser";
import {MyApp} from "./app";
bootstrap(MyApp);

最后，將 Views/Home/Index.cshtml 改成：

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/angular2-polyfills.js"></script>
<script src="~/Scripts/system.src.js"></script>
<script src="~/Scripts/rx.js"></script>
<script src="~/Scripts/angular2.js"></script>
<script>
    System.config({
        packages: {
            '/Scripts/App': {
                format: 'cjs',
                defaultExtension: 'js'
            }
        }
    });
    System.import('/Scripts/App/main').then(null, console.error.bind(console));
</script>
<my-app>Loading...</my-app>

這里加載了此應用。

運行 ASP.NET 應用，你應該能看到一個 div 顯示 "Loading..." 緊接著更新成顯示 "Hello from TypeScript"。