Captcha服務（後續2）— 改造Captcha服務之Asp.Net Core項目中如何集成TypeScript

環境準備

.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