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。

新建工程

選擇 File
選擇 New Project （Ctrl + Shift + N）
選擇 Visual C#
選擇 ASP.NET Web Application
選擇 ASP.NET 5 Empty 工程模板

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

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

設定服務項

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

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

設定"noImplicitAny": true。
顯式列出了"files"而不是依據"excludes"。
設定"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>

測試

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

Picture of running demo

除錯

在 Edge 瀏覽器中，按 F12 鍵並選擇 Debugger 標籤頁。
展開 localhost 列表，選擇 scripts/app.ts
在 return 那一行上打一個斷點。
在輸入框中鍵入一些內容，確認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 的一部分複製進來。我們需要新增：

庫檔案目錄。
新增一個 lib 任務來輸送檔案到 wwwroot。
在 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"。

ASP.NET Core ----ASP.NET Core中使用Code First
2018-12-05
ASP.NET
jwt-在asp.net core中的使用jwt
2021-07-01
JWTASP.NET
在ASP.NET Core中用HttpClient（六）——ASP.NET Core中使用HttpClientFactory
2021-03-29
ASP.NETHTTPclient
【asp.net core 系列】14 .net core 中的IOC
2020-06-28
ASP.NET
ASP.Net Core5.0 EF Core使用記錄
2021-06-01
ASP.NET
聊聊ASP.NET Core中的配置
2021-02-20
ASP.NET
ASP.NET Core 中的快取
2018-08-15
ASP.NET快取
ASP.NET Core使用EF Core操作MySql資料庫
2018-11-30
ASP.NETMySql資料庫
淺談ASP.NET Core中IOC與DI的理解和使用
2019-07-02
ASP.NET
在 ASP.NET Core 中禁用HTTPS
2019-10-10
ASP.NETHTTP
ASP.NET Core 中的管道機制
2019-07-25
ASP.NET
ASP.NET Core 學習筆記第四篇 ASP.NET Core 中的配置
2021-10-29
ASP.NET筆記
如何在 ASP.Net Core 中使用 Lamar
2021-03-10
ASP.NET
在ASP.NET Core中使用ViewComponent
2021-04-10
ASP.NETView
ASP.NET Core初步使用Quartz.NET
2021-08-11
ASP.NETquartz
如何在ASP.NET Core 中使用IHttpClientFactory
2021-02-18
ASP.NETHTTPclient
ASP.NET Core 學習筆記第五篇 ASP.NET Core 中的選項
2021-11-21
ASP.NET筆記
ASP.NET 6.0 Core 遷移 ASP.NET Core 7.0
2023-01-17
ASP.NET
ASP.NET Core 入門教程 2、使用ASP.NET Core MVC框架構建Web應用
2018-09-21
ASP.NETMVC框架架構Web
ASP.net core 使用UEditor.Core 實現 ueditor 上傳功能
2019-02-20
ASP.NET
ASP.NET Core中的響應壓縮
2020-07-29
ASP.NET
windows 服務中託管asp.net core
2018-08-23
WindowsASP.NET
ASP.NET Core中的資料保護
2021-01-15
ASP.NET
ASP.NET Core 依賴注入中的Scope
2024-04-11
ASP.NET依賴注入
如何在 ASP.NET Core 中使用 API Analyzer
2021-09-09
ASP.NETAPI
使用VS Code開發asp.net core (上)
2018-02-16
ASP.NET
使用VS Code開發asp.net core (下)
2018-02-17
ASP.NET
ASP.NET CORE CACHE的使用（含MemoryCache，Redis）
2017-03-17
ASP.NETRedis
[譯] 在 ASP.NET Core 中使用 SignalR
2017-10-28
ASP.NETSignalR
ASP.NET Core Kestrel 中使用 HTTPS （SSL）
2016-08-18
ASP.NETHTTP
Asp.Net Core WebAPI+PostgreSQL部署在Docker中
2019-08-13
ASP.NETWebAPISQLDocker
玩轉ASP.NET Core中的日誌元件
2018-09-22
ASP.NET元件
ASP.NET Core 中基於策略的授權
2018-07-23
ASP.NET
Asp.net core中RedisMQ的簡單應用
2020-12-08
ASP.NETRedisMQ
【譯】ASP.NET Core 6 中的效能改進
2022-03-10
ASP.NET
Asp.Net Core 中的HTTP協議詳解
2021-10-09
ASP.NETHTTP協議
ASP.NET Core Web API中使用Swagger
2019-07-04
ASP.NETWebAPISwagger
ASP.NET Core視覺化日誌元件使用
2021-09-09
ASP.NET視覺化元件