1.)先来一段Typescript的环境安装.
安装nodejs ，下载地址：https://nodejs.org/en/download/ //(node-v12.18.3-x64.msi)
ts教程：https://www.runoob.com/typescript/ts-ambient.html
步骤1)安装npm(安装nodejs)
npm -v
步骤2)通过node.js commond promot来实现npm命令安装typescript
npm install -g typescript
步骤3)查看是否安装typescript成功.
tsc -v
步骤4)编译指定的ts代码为js.
tsc "F:\ConfigLab.TypeScriptLab\wwwroot\js\ts\test.ts" "F:\ConfigLab.TypeScriptLab\wwwroot\js\ts\test2.ts" "F:\ConfigLab.TypeScriptLab\wwwroot\js\ts\ModuleDemo.ts"
之后同目录下会生成js文件。
2.)分享下学习调试笔记.
2.1)Ts源码.
2.1.1)test2.ts(常规语法及面向对象相关).
//import ModuleDemoRef = require("./ModuleDemo");//可能要考虑用webpack打包，或者设置(https://www.jianshu.com/p/7d443361ad20)
//---定义变量
var message: string = "Hello World2"
console.log(message);
//--定义类
class UserInfo {
type: string ;
constructor(type: string) {
this.type = type;
}
username(): string {
return "匿名用户";
}
age(): number {
return 25;
}
getExplain(): string {
return this.type + "_" + this.username() + "_" + this.age();
}
}
var obj = new UserInfo("102");
console.log(obj.username());
console.log(obj.getExplain());
//--定义一个2进制
let hexLiteral: number = 0b1001;
//--定义一个泛型集合
let arr: Array<number> = [1, 2];
//--定义一个元组
let x: [string, number];
x = ['Runoob', 1]; // 运行正常
console.log(x[0]); // 输出 Runoob
//--定义一个枚举
enum Color { Red, Green, Blue };
let c: Color = Color.Blue;
console.log(c); // 输出 2
let viewModel: any = (<any>window).viewModel
//关于Map
/*
let countryMap = new Map();
countryMap.set("cn", "中国");
countryMap.set("jp", "日本");
countryMap.set("usa", "美国");
console.log("usa对应的国家=" + countryMap.get("usa"));
// 迭代 Map 中的 key
for (let key of countryMap.keys()) {
console.log(key + ":" + countryMap.get(key));
}
*/
//联合类型（指定若干个类型，如果是其它类型则为非法)
var mutiltype_var: string | number
mutiltype_var = 10
console.log("联合类型.数字为 " + mutiltype_var)
mutiltype_var = "ten"
console.log("联合类型.字符串为 " + mutiltype_var)
/*
if (typeof (viewModel) != "undefined") {
window.alert("这里是ts中调用viewModel的属性:" + viewModel.userName);
}
else {
window.alert("ts.viewModel未定义");
}
*/
function getTxtValue(name: string): string {
var val = (document.getElementsByName(name)[0] as HTMLInputElement).value;
return val;
};
function setTxtValue(name: string,val:string): void {
(document.getElementsByName(name)[0] as HTMLInputElement).value = val;
};
//设置事件
function setEventListen(name: string): void {
(document.getElementsByName(name)[0] as HTMLInputElement).onclick = function () {
alert("ts.setEventListen:添加了一个事件");
};
};
//定义并引用 jQuery
declare var $: (selector: string) => any;
function getValueByJquery(name: string): string {
return $("[name='"+name+"']").val();
}
//关于接口与继承
interface ILoginValide {
UserName: string,
Pwd: string,
Valide: () => string
}
var userLoginValide: ILoginValide = {
UserName: "user001",
Pwd: "123456",
Valide: (): string => {
return "账户密码验证";
}
}
console.log("userLoginValide.UserName=" + userLoginValide.UserName);
interface IVerycodeLoginValide extends ILoginValide {
UserName: string,
Pwd: string,
AssistValideCode: string,
Valide: () => string
}
var verycodeLoginValide: IVerycodeLoginValide={
UserName: "user002",
Pwd:"123456",
AssistValideCode: "590122",
Valide: (): string => {
return "图形验证码验证";
}
}
console.log("verycodeLoginValide.AssistValideCode=" + verycodeLoginValide.AssistValideCode);
//类的继承
class accountLoginValide {
UserName: string;
Pwd: string;
constructor(sUserName: string,sPwd:string) {
this.UserName = sUserName;
this.Pwd = sPwd;
}
Valide(): void {
console.log("loginValide.Valide=" + this.UserName);
}
}
class phoneLoginValide extends accountLoginValide {
static smsCount: number;//静态字段
public smscode: string;//默认是public,也可以指定为private,protected
Valide(): void {
phoneLoginValide.smsCount++;
console.log("phoneLoginValide.Valide=" + this.UserName + ",smscode=" + this.smscode);
}
}
//类实现接口
class simpleLoginValide implements ILoginValide {
private loginUrl: string="http://api.test.com/usercenter/login";
UserName: string;
Pwd: string;
constructor(sUserName: string, sPwd: string) {
this.UserName = sUserName;
this.Pwd = sPwd;
}
Valide(): string{
//ajax请求等
console.log("simpleLoginValide.实现接口ILoginValide,usercenter.url=" + this.loginUrl);
return "";
}
}
//动态类型:鸭子类型
interface IPoint {
x: number
y: number
}
function PointsAdd(p1: IPoint, p2: IPoint): IPoint {
var x = p1.x + p2.x
var y = p1.y + p2.y
return { x: x, y: y }
}
var newPoint = PointsAdd({ x: 3, y: 4 }, { x: 5, y: 1 });
console.log("动态类型(鸭子类型): x=" + newPoint.x + ",y=" + newPoint.y);
namespace configlab {
export interface IAjax {
url: string,
data: string,
method: string,
ajax:()=>string
}
export class AjaxProcesser implements IAjax {
url: string;
data: string;
method: string;
constructor(sUrl: string, sData: string, sMethod: string) {
this.url = sUrl;
this.data = sData;
this.method = sMethod;
}
ajax(): string {
console.log("ajax请求,url=" + this.url + ",data=" + this.data + ",method=" + this.method);
return "ajax请求了";
}
}
}
//页面全局初始化
function InitTs(): void {
//绑定事件
setEventListen("btn_dynamic");
//创建一个实例
var lv = new accountLoginValide("user007", "123456");
lv.Valide();
//创建一个子类实例
var lvPhone = new phoneLoginValide("user007", "123456");
lvPhone.smscode = "512009";
for (var i = 0; i < 10; i++) {
lvPhone.Valide();
}
console.log("phoneLoginValide.Valide=" + this.UserName + ",smscode=" + this.smscode + ",smsCount=" + phoneLoginValide.smsCount);
//判断对象是否是指定类型
if (lv instanceof phoneLoginValide) {
console.log("lv instanceof phoneLoginValide的结果：true");
}
else {
console.log("lv instanceof phoneLoginValide的结果：false");
}
//类实现接口的效果展示
var lvSimple = new simpleLoginValide("user007", "123456");
lvSimple.Valide();
//命名空间中的类的实例
var objAjax = new configlab.AjaxProcesser("http://api.test.com","username=u1&pwd=123456","POST");
objAjax.ajax();
//引用其它模块的相关接口或类(引用需要用到import，位于文件头部)
////可能要考虑用webpack打包，或者设置(https://www.jianshu.com/p/7d443361ad20)
//var objAjaxFile = new ModuleDemoRef.SubmitFileProcesser("http://api.test.com", "username=u1&pwd=123456", "POST","D:\\a.txt");
//objAjaxFile.ajaxFile();
}
2.1.2)moduledemo.ts(当做一个将被导入引用的外部模块)..定义interface和class需要以export开头.
export interface ISubmitFile {
url: string,
data: string,
method: string,
filename:string,
ajaxFile: () => string
}
export class SubmitFileProcesser implements ISubmitFile {
url: string;
data: string;
method: string;
filename: string;
constructor(sUrl: string, sData: string, sMethod: string,sFilename:string) {
this.url = sUrl;
this.data = sData;
this.method = sMethod;
this.filename = sFilename;
}
ajaxFile(): string {
console.log("ajaxFile请求,url=" + this.url + ",data=" + this.data + ",method=" + this.method + ",filename=" + this.filename);
return "ajax请求了";
}
}
2.2)Html源码.
@{
ViewData["Title"] = "TsLab";
}
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
function showData() {
alert("ts中的方法获取: username=" + getTxtValue("UserName") + ",linkTel=" + getTxtValue("linkTel") + ",userType=" + getTxtValue("userType"));
}
function setData() {
setTxtValue("linkTel", "15800010003");
alert("ts中的方法获取: username=" + getTxtValue("UserName") + ",linkTel=" + getTxtValue("linkTel") + ",userType=" + getTxtValue("userType"));
alert("ts.getValueByJquery=" + getValueByJquery("linkTel"));
}
</script>
<div>
<label>用户名</label>
<input name="UserName" type="text" value="user1"/><br />
<label>联系电话</label>
<input name="linkTel" type="text" value="15900010002" />
<label>用户类型</label>
<select name="userType">
<option value="100">老手</option>
<option value="101" selected="selected">新手</option>
</select>
<span id="tips"></span>
</div>
<input type="button" value="获取用户名" onclick="showData();" />
<input type="button" value="设置用户名(123)" onclick="setData();" />
<input name="btn_dynamic" type="button" value="需要动态绑定事件的" />
<a></a>
<script type="text/javascript" src="~/js/ts/test2.js?v=202008231621016"></script>
<script type="text/javascript">
InitTs()
</script>
2.3)效果展示.
