環境準備

.Net Core 版本：下載安裝.Net Core SDK，安裝完成之後檢視sdk版本 ，檢視命令dotnet --version，我的版本是2.2.101
IDE： Visual Studio 2017
目標：將 我的GitHub專案 Captcha.WebApi 改造，在專案中使用TypeScript

執行環境準備

安裝Node.js

如果已經安裝請忽略，https://nodejs.org/zh-cn/ 下載nodejs，我選擇的是LTS版本。
安裝完成之後驗證是否安裝成功。cmd命令node -v，如果提示'node' 不是內部或外部命令，也不是可執行的程式 或批處理檔案。，可能是因為在安裝之前已經打開了cmd，重新開啟一個cmd終端。
我的nodejs版本是v10.14.2

安裝TypeScript

如果已經安裝請忽略。TypeScript網站可訪問：https://www.typescriptlang.org/ 和 https://www.tslang.cn/
安裝命令npm install -g typescript，安裝之後驗證是否可用，tsc -v，我的版本是Version 3.2.2。

專案整合tsc命令

右鍵選擇專案屬性，點選生成事件，在生成前時間命令列輸入tsc，如下圖所示

新增tsconfig.json

可以參考 https://www.tslang.cn/docs/handbook/asp-net-core.html
可以在配置中指定編譯生成的js檔案的位置（"outDir": "wwwroot/js"

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

新增完成之後，重新生成解決方案，發現會報錯MSB3073 命令“tsc”已退出，程式碼為 9009。
重啟Visual Studio之後再次編譯。如果仍編譯不通過，在解決方案的目錄下cmd執行npm install

開發

ts如何使用jQuery寫ajax

通過npm安裝@types/jquery，在專案目錄下，cmd命令npm i @types/jquery
先寫個ajax get請求

class HttpService {
    static readonly instance = new HttpService();

    private constructor() {

    }

    public async getAsync<T>(url: string): Promise<T> {
        try {
            const result = await $.ajax(url, { type: "GET" });
            return result as T;
        } catch (e) {
            alert(e);
        }
    }
}

編譯報錯，提示TS2705 (TS) ES5/ES3 中的非同步函式或方法需要 "Promise" 建構函式。確保對 "Promise" 建構函式進行了宣告或在 "--lib" 選項中包含了 "ES2015"。
解決辦法：開啟tsconfig.json，新增lib選項，修改之後的tsconfig.json，如下

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js",
    "lib": [
      "es2016",
      "dom",
      "es5"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

重新生成解決方案，編譯成功。接著寫post請求。

cshtml頁面引入js

<script src="~/js/httpService.js" charset="utf-8"></script>
 <script src="~/js/captcha.js" charset="utf-8"></script>

debug報錯：httpService.js和captcha.js不存在，發現Configure方法未啟用靜態檔案。
新增app.UseStaticFiles();
再次執行，除錯ok。

GitHub地址：WebApi_AspDotNetCore2_2_TypeScript

直接下載或者clone下來之後執行，如果報錯，請安裝本地環境，並配置生成前時間命令列，在專案目錄下cmd執行npm install

檢視之前文章：
使用.Net Core 2.1開發Captcha圖片驗證碼服務
Captcha服務（後續1）

參考文章：https://www.tslang.cn/docs/handbook/asp-net-core.html