選擇 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

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

運(yùn)行此應(yīng)用以確保它能正常工作。

添加 TypeScript

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

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}!`;
}

構(gòu)建設(shè)置

右擊項(xiàng)目并選擇 New Item。接著選擇 TypeScript Configuration File 保持文件的默認(rèn)名字為 tsconfig.json。

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

將默認(rèn)的 tsconfig.json 內(nèi)容改為如下所示：

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

看起來和默認(rèn)的設(shè)置差不多，但注意以下不同之處：

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

當(dāng)你寫新代碼時(shí)，設(shè)置 "noImplicitAny" 選項(xiàng)是個(gè)好主意 — 這可以確保你不會(huì)錯(cuò)寫任何新的類型。

設(shè)置 "compileOnSave" 選項(xiàng)可以確保你在運(yùn)行web程序前自動(dòng)編譯保存變更后的代碼。

更多信息請(qǐng)參見 the tsconfig.json documentation。

在視圖中調(diào)用腳本

在 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>

測(cè)試

運(yùn)行項(xiàng)目。
在輸入框中鍵入時(shí)，您應(yīng)該看到一個(gè)消息：

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

調(diào)試

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

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

這就是你需要知道的在ASP.NET中使用TypeScript的基本知識(shí)了。接下來，我們引入Angular，寫一個(gè)簡(jiǎn)單的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 選項(xiàng)。接著鍵入 "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 及其依賴項(xiàng)，我們還需要啟用 TypeScript 中實(shí)驗(yàn)性的裝飾器支持并且引入 es6-shim 的類型文件。將來的版本中，裝飾器和 ES6 選項(xiàng)將成為默認(rèn)選項(xiàng)，我們就可以不做此設(shè)置了。

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

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

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

{
  "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 的一部分復(fù)制進(jìn)來。這樣操作，右擊項(xiàng)目選擇 'Unload' ，再次右擊項(xiàng)目選擇 'Edit csproj'。

在 TypeScript 配置項(xiàng) PropertyGroup 之后，添加一個(gè) ItemGroup 和 Target 配置項(xiàng)來復(fù)制 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)在，在工程上右擊選擇重新加載項(xiàng)目。此時(shí)應(yīng)當(dāng)能在解決方案資源管理器（Solution Explorer）中看到node_modules。

用 TypeScript 寫一個(gè)簡(jiǎn)單的 Angular 應(yīng)用

首先，將 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>

這里加載了此應(yīng)用。

運(yùn)行 ASP.NET 應(yīng)用，你應(yīng)該能看到一個(gè) div 顯示 "Loading..." 緊接著更新成顯示 "Hello from TypeScript"。

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

ASP.NET 4

安裝 TypeScript

新建項(xiàng)目