ASP.NET Core 中使用TypeScript

tinys發表於2018-05-26
ASP.NETTypeScript

ASP.NET Core

注意：Visual Studio 2017和最新版本的ASP.NET的更新即將推出！

安裝 ASP.NET Core 和 TypeScript

首先，若有必要請安裝 ASP.NET Core。 這個快速上手指南使用的是 Visual Studio ，若要使用 ASP.NET Core 你需要有 Visual Studio 2015。

其次，如果你的 Visual Studio 中沒有包含 TypeScript，你可以從這裡安裝TypeScript for Visual Studio 2015。

新建工程

  1. 選擇 File

  2. 選擇 New Project （Ctrl + Shift + N）

  3. 選擇 Visual C#

  4. 選擇 ASP.NET Web Application

    Create new ASP.NET project

  5. 選擇 ASP.NET 5 Empty 工程模板

    取消複選 "Host in the cloud" 本指南將使用一個本地示例。Use empty template

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

設定服務項

在 project.json 檔案的 "dependencies" 欄位裡新增:

"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"

最終的 dependencies 部分應該類似於下面這樣：

"dependencies": {
  "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
  "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
  "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
},

用以下內容替換 Startup.cs 檔案裡的 Configure 函式：

public void Configure(IApplicationBuilder app)
{
    app.UseIISPlatformHandler();
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

新增 TypeScript

下一步我們為 TypeScript 新增一個資料夾。

Create new folder

將資料夾命名為 scripts。

scripts folder

新增 TypeScript 程式碼

在scripts上右擊並選擇New Item。 接著選擇 TypeScript File（也可能 .NET Core 部分），並將此檔案命名為app.ts。

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

構建設定

配置 TypeScript 編譯器

我們先來告訴TypeScript怎樣構建。 右擊scripts資料夾並選擇 New Item。 接著選擇 TypeScript Configuration File，保持檔案的預設名字為tsconfig.json。

Create tsconfig.json

將預設的tsconfig.json內容改為如下所示：

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

看起來和預設的設定差不多，但注意以下不同之處：

  1. 設定"noImplicitAny": true。
  2. 顯式列出了"files"而不是依據"excludes"。
  3. 設定"compileOnSave": true。

當你寫新程式碼時，設定"noImplicitAny"選項是個不錯的選擇 — 這可以確保你不會錯寫任何新的型別。 設定"compileOnSave"選項可以確保你在執行web程式前自動編譯儲存變更後的程式碼。

配置 NPM

現在，我們來配置NPM以使用我們能夠下載JavaScript包。 在工程上右擊並選擇 New Item。 接著選擇 NPM Configuration File，保持檔案的預設名字為package.json。 在 "devDependencies"部分新增"gulp"和"del"：

"devDependencies": {
  "gulp": "3.9.0",
  "del": "2.2.0"
}

儲存這個檔案後，Visual Studio將開始安裝gulp和del。 若沒有自動開始，請右擊package.json檔案選擇 Restore Packages。

設定 gulp

最後，新增一個新JavaScript檔案gulpfile.js。 鍵入以下內容：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
  scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
};

gulp.task('clean', function () {
  return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', function () {
  gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
});

第一行是告訴Visual Studio構建完成後，立即執行'default'任務。 當你應答 Visual Studio 清除構建內容後，它也將執行'clean'任務。

現在，右擊gulpfile.js並選擇Task Runner Explorer。 若'default'和'clean'任務沒有顯示輸出內容的話，請重新整理explorer：

Refresh Task Runner Explorer

編寫HTML頁

在wwwroot中新增一個新建項 index.html。 在 index.html中寫入以下程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/app.js"></script>
    <title></title>
</head>
<body>
    <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>
</body>
</html>

測試

  1. 執行專案。
  2. 在輸入框中鍵入時，您應該看到一個訊息：

Picture of running demo

除錯

  1. 在 Edge 瀏覽器中，按 F12 鍵並選擇 Debugger 標籤頁。
  2. 展開 localhost 列表，選擇 scripts/app.ts
  3. 在 return 那一行上打一個斷點。
  4. 在輸入框中鍵入一些內容，確認TypeScript程式碼命中斷點，觀察它是否能正確地工作。

Demo paused on breakpoint

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

新增 Angular 2

使用 NPM 下載所需的包

在 package.json 檔案的 "dependencies" 新增 Angular 2 和 SystemJS：

 "dependencies": {
    "angular2": "2.0.0-beta.11",
    "systemjs": "0.19.24",
  },

更新 tsconfig.json

現在安裝好了Angular 2及其依賴項，我們需要啟用TypeScript中實驗性的裝飾器支援。 我們還需要新增ES2015的宣告，因為Angular使用core-js來支援像 Promise的功能。 在未來，裝飾器會成為預設設定，那時也就不再需要這些設定了。

新增"experimentalDecorators": true, "emitDecoratorMetadata": true到"compilerOptions"部分。 然後，再新增 "lib": ["es2015", "es5", "dom"]到"compilerOptions"，以引入ES2015的宣告。 最後，我們需要新增 "./model.ts"到"files"裡，我們接下來會建立它。 現在 tsconfig.json看起來如下：

{
    "compilerOptions": {
        "noImplicitAny": true,
        "noEmitOnError": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "target": "es5",
        "lib": [
            "es2015", "es5", "dom"
        ]
    },
    "files": [
        "./app.ts",
        "./model.ts",
        "./main.ts",
    ],
    "compileOnSave": true
}

將 Angular 新增到 gulp 構建中

最後，我們需要確保 Angular 檔案作為 build 的一部分複製進來。 我們需要新增：

  1. 庫檔案目錄。
  2. 新增一個 lib 任務來輸送檔案到 wwwroot。
  3. 在 default 任務上新增 lib 任務依賴。

更新後的 gulpfile.js 像如下所示：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
    scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
    libs: ['node_modules/angular2/bundles/angular2.js',
           'node_modules/angular2/bundles/angular2-polyfills.js',
           'node_modules/systemjs/dist/system.src.js',
           'node_modules/rxjs/bundles/Rx.js']
};

gulp.task('lib', function () {
    gulp.src(paths.libs).pipe(gulp.dest('wwwroot/scripts/lib'))
});

gulp.task('clean', function () {
    return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', ['lib'], function () {
    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
});

此外，儲存了此gulpfile後，要確保 Task Runner Explorer 能看到 lib 任務。

用 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;
    }
}

接著在 scripts 中新增 TypeScript 檔案 model.ts:

export class MyModel {
    compiler = "TypeScript";
}

再在 scripts 中新增 main.ts：

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

最後，將 index.html 改成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/lib/angular2-polyfills.js"></script>
    <script src="scripts/lib/system.src.js"></script>
    <script src="scripts/lib/rx.js"></script>
    <script src="scripts/lib/angular2.js"></script>
    <script>
    System.config({
        packages: {
            'scripts': {
                format: 'cjs',
                defaultExtension: 'js'
            }
        }
    });
    System.import('scripts/main').then(null, console.error.bind(console));
    </script>
    <title></title>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

這裡載入了此應用。 執行 ASP.NET 應用，你應該能看到一個 div 顯示 "Loading..." 緊接著更新成顯示 "Hello from TypeScript"。

相關文章