记录Typescript的学习调试笔记(比 javascript更具面向对象，强类型检查，静态字段，适合现代的大团队分工与管理风格).

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)效果展示.