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