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
最新文章
- COM中的REFIID小解【转】
- sencha做个简单的登录界面
- linux卸载mysql,apache,php
- Visual Studio 2010(.NET 4.0)中使用SQLite.NET
- python : jquery实现左侧菜单
- Linux下安装Firefox以及更新Adobe flash
- linq to sql ,将var 类型转为 IList 类型
- WIFI环境下Android手机和电脑通信
- POJ 3345-Bribing FIPA(树状背包)
- Python_记一次网站数据定向爬取实现
- ElasticSearch6.5.0 【script_lang not supported】
- 2、金融之关于BOLL
- 查看Windows版本号
- November 13th, 2017 Week 46th Monday
- JavaScript世界的一等公民 - 函数
- bzoj1087互不侵犯King(状压)
- git 统计代码量 shell脚本
- 【转】Apache虚拟主机的配置和泛解析域名的绑定
- export,import ,export default的区别
- Educational Codeforces Round 21 D - Array Division (前缀和+二分)