TypeScript：文件 - ASP.NET Core - TypeScript 程式語言

安裝 ASP.NET Core 和 TypeScript

首先，如果需要，請安裝 ASP.NET Core。本快速入門指南需要 Visual Studio 2015 或 2017。

接下來，如果您的 Visual Studio 版本尚未包含最新的 TypeScript，您可以安裝它。

建立新專案

選擇 檔案 (File)
選擇 新建專案 (New Project) (Ctrl + Shift + N)
在專案搜尋欄中搜索 .NET Core
選擇 ASP.NET Core Web 應用程式 (ASP.NET Core Web Application) 並點選 下一步 (Next) 按鈕

Visual Studio Project Window Screenshot

為您的專案和解決方案命名。然後點選 建立 (Create) 按鈕

Visual Studio New Project Window Screenshot

在最後一個視窗中，選擇 空 (Empty) 模板並點選 建立 (Create) 按鈕

Visual Studio Web Application Screenshot

執行應用程式，確保其正常工作。

A screenshot of Edge showing "Hello World" as success

設定伺服器

開啟 依賴項 (Dependencies) > 管理 NuGet 程式包 (Manage NuGet Packages) > 瀏覽 (Browse)。搜尋並安裝 Microsoft.AspNetCore.StaticFiles 和 Microsoft.TypeScript.MSBuild

The Visual Studio search for Nuget

開啟您的 Startup.cs 檔案，編輯 Configure 函式，使其看起來像這樣

public void Configure(IApplicationBuilder app, IHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();
}

您可能需要重啟 VS，以便 UseDefaultFiles 和 UseStaticFiles 下方的紅色波浪線消失。

新增 TypeScript

接下來，我們將新增一個名為 scripts 的新資料夾。

The Path of "Add" then "New Folder" in Visual Studio from a Web Project

新增 TypeScript 程式碼

右鍵點選 scripts 並點選 新建項 (New Item)。然後選擇 TypeScript 檔案 (TypeScript File) 並將檔案命名為 app.ts

A highlight of the new folder

新增示例程式碼

將以下程式碼新增到 app.ts 檔案中。

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 配置檔案 (TypeScript Configuration File) 並使用預設名稱 tsconfig.json

A screenshot showing the new file dialogue with TypeScript JSON Config selected

使用以下內容替換 tsconfig.json 檔案的內容

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

noEmitOnError：如果報告了任何錯誤，則不輸出結果。
noImplicitAny：對具有隱式 any 型別的表示式和宣告引發錯誤。
sourceMap：生成相應的 .map 檔案。
target：指定 ECMAScript 目標版本。

注意："ESNext" 目標為最新支援的版本

noImplicitAny 在編寫新程式碼時是個好主意——您可以確保不會錯誤地編寫任何未指定型別的程式碼。"compileOnSave" 可以讓您在執行的 Web 應用程式中輕鬆更新程式碼。

設定 NPM

我們需要設定 NPM，以便下載 JavaScript 包。右鍵點選專案並選擇 新建項 (New Item)。然後選擇 NPM 配置檔案 (NPM Configuration File) 並使用預設名稱 package.json。

Screenshot of VS showing new file dialog with 'npm configuration file' selected

在 package.json 檔案的 "devDependencies" 部分中，新增 gulp 和 del

"devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0"
}

儲存檔案後，Visual Studio 應開始安裝 gulp 和 del。如果沒有，右鍵點選 package.json 並選擇“還原程式包 (Restore Packages)”。

完成後，您應該會在解決方案資源管理器中看到一個 npm 資料夾

Screenshot of VS showing npm folder

設定 gulp

右鍵點選專案並點選 新建項 (New Item)。然後選擇 JavaScript 檔案 (JavaScript File) 並使用名稱 gulpfile.js

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 (done) {
    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
    done();
});

第一行告訴 Visual Studio 在構建完成後執行“default”任務。當您要求 Visual Studio 清理構建時，它也會執行“clean”任務。

現在右鍵點選 gulpfile.js 並點選“任務執行程式資源管理器 (Task Runner Explorer)”。

Screenshot of right clicking on the "Gulpfile.js" with 'Task Runner Explorer' selected

如果“default”和“clean”任務沒有顯示，請重新整理資源管理器

Screenshot of task explorer with "Gulpfile.js" in it

編寫 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>

測試

執行專案
當您在框中輸入內容時，應該會看到訊息出現/改變！

A GIF of Edge showing the code you have just wrote

除錯

在 Edge 中，按 F12 並點選“偵錯程式 (Debugger)”選項卡。
檢視第一個 localhost 資料夾，然後檢視 scripts/app.ts
在 return 所在行設定斷點。
在框中輸入內容，確認斷點已命中 TypeScript 程式碼，並且檢查功能工作正常。

An image showing the debugger running the code you have just wrote

恭喜，您已經構建了一個帶有 TypeScript 前端的 .NET Core 專案。