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