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

//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(); }

    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请求了";         }     }

@{     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>