let isDone: boolean = false;let decLiteral: number = 0xf00d;let names: string = 'boob';/** 使用模版字符串 */let name1: string = `gene`;let age: number = 37;let sentence = `Hello, my name is ${name1}I'll be ${age + 1} years old next month `;function error(message: string): never { throw new Error(message);}let str: string = 'nihao';// 元组类型let arr1: [number, string] = [123, "aa"];//枚举类型enum personm { age = 1, height = 2}let s: personm = personm.age;// r任意类型let num: any = 123;let oBox: any = document.getElementById('#oBox');console.log(oBox);// number 类型, null, undefinedlet num1: number | null | undefined;num = 1234;//void类型 表示没有任何类型,一般用于 定义 没有返回值的方法function run(): void { console.log('run');}// 必须要返回 number类型function run1(): number { console.log('run'); return 1;}// 任意类型var arr2: any[] = ['123', 'asd', 123];//3.1 TS中 函数的定义function getInfo(name: string, age: number): string { return `${name}:${age}`}console.log(getInfo('tong', 222));//匿名函数let getInfo1 = function (name: string, age: number): string { return `${name}:${name}`}//没有返回值的方法function run2(): void { console.log('run');}//3.2 TS中 可选参数//es5的形参 和 实参 可以不一样 //注意:age?:number 可选参数 必须放到最后面function getInfo2(name: string, age?: number): string { if (age) { return `${name} --- ${age}`; } else { return `${name} ---年龄保密` }}console.log(getInfo2('tong1'))//3.3 默认参数function getInfo3(name: string, age: number = 22) { if (age) { return `${name} --- ${age}`; } else { return `${name} ---年龄保密` }}console.log(getInfo3('tong2'))//3.4 剩余参数// function sum(a:number,b:number,c:number,d:number):number{// return a+b+c+d;// }//三点运算符接受剩余参数 ...function sum(...result: number[]): number { let sum = 0; for (let i = 0; i < result.length; i++) { sum += result[i]; } return sum;}console.log(sum(1, 2, 3, 4, 5, 6, 7, 8))//3.5 TS 函数的重载function getInfo4(config: string): string;function getInfo4(age: number): number;function getInfo4(name: string, age: number): string;function getInfo4(str: any, age?: any): any { if (typeof str === 'string') { return '我叫:' + str; } else { return '我的年龄' + str; }}//调用console.log(getInfo4('tong1')); //正确console.log(getInfo4(20)); //正确//错误用法// console.log(getInfo4(true));//3.6 箭头函数 this 指向的问题,上下文setTimeout(() => { // console.log('箭头函数');})/**---------------------------es5--------------------------- */// //es5 里面的继承// //4.1 简单类// function person(){// this.name = 'tong';// }// var p = new person();// console.log(p.name);// //4.2 构造函数和原型链里面增加方法// function person1(){// this.name= 'tong1';// this.age = 20;// this.run = function(){// console.log('tong1在 run')// }// }// person1.prototype.sex='男';// person1.prototype.work= function (){// console.log('tong1 在工作 ')// }// var p1 = new person1();// p1.run();// //4.3 类里面的静态方法// function person2(){// this.name= 'tong2';// this.age = 20;// this.run = function(){// console.log('tong2在 run')// }// }// person2.getInfo = function(){// console.log('person2的静态方法');// }// person2.getInfo();// //4.4 继承 原型链和对象冒充// function webPerson(){// person1.call(this); /** 这就是对象冒充 使用call 函数 */// }// var wp = new webPerson();// wp.run(); /** 对象冒充 只可以 继承构造函数里面的对象和方法 */// // wp.work();/** 注意! 对象冒充 无法 继承原型链上面的方法 */// //4.5 原型链继承// webPerson.prototype = new person1(); // 原型链继承// var wp1=new webPerson();// console.log('------------')// wp1.work();/** 实现原型链继承的好处 既可以继承构造函数的属性方法 也可以继承原型链的方法 */// //4.6原型链继承的问题 实例化子类的时候 无法给父类传参// //4.7 !!重点 组合继承的方式 原型链加构造函数的// function person3(name,age){// this.name= name;// this.age = age;// this.run = function(){// console.log(this.name + ' 在 run : 原型链加构造函数');// }// }// person3.prototype.sex='男';// person3.prototype.work= function (){// console.log('tong1 在工作 ')// }// function person3C(name,age){// person3.call(this,name,age); // 对象冒充继承 实例化子类可以给父类传参// }// person3C.prototype = new person3();// var newP3= new person3C('tong3C',22);// newP3.run();/**---------------------------es5 end--------------------------- */// 5.ts 中定义类 class person4 { name: string; // 属性 前面省略了publick关键词 constructor(n: string) {// 构造函数 实例化出发的方法 this.name = n; } run(): void { console.log(this.name); }}//实例化var p4 = new person4('tong4');p4.run();//5.1 ts 中关于继承的探讨 父类的方法和子类的方法一致class Web5 extends person4 { constructor(name: string) { super(name);// 初始化 父类的构造函数 } work() { console.log(`${this.name} 在work`) } run() { console.log(`${this.name} :子类的run`) }}var w1 = new Web5('tong5 class extents继承');w1.run();w1.work();//类的 三种 修饰符 /** * public : 公有 在当前类里面,子类,类外面都可以访问 * protected : 保护类 在当前类里面/子类里面可以访问,在类外部无法访问 * private : 私有 找类里面可以访问, 子类,类外面都无法访问 */// public// protectedclass person6 { // 如果不加修饰符 默认就是公有 public name: string; // 属性 前面省略了publick关键词 protected name2: string; // 保护类型 private name3: string; // 保护类型 constructor(n: string, m: string, o: string) {// 构造函数 实例化出发的方法 this.name = n; this.name2 = m; this.name3 = o; } run(): void { console.log(this.name); console.log(this.name2); console.log(this.name3); }}class web6 extends person6 { constructor(n: string, m: string, o: string) { super(n, m, o); } work() { console.log(`${this.name}:${this.name2}`); // console.log(`${this.name}:${this.name2}:${this.name3}`); // private 无法访问私有属性 }}let w2 = new web6('t1', 't2', 't3');w2.work();console.log(w2.name);// console.log(w2.name2);class person7 { public name7: string; constructor(name: string) { this.name7 = name; }; run() { }; work() { }}//6.0 多态 定义一个方法不去实现,让继承他的子类去继承,每个子类的表现不一样class person8 { name: string; constructor(name: string) { this.name = name; }; eat() { console.log('多态: 定义的空方法'); }}class person8a extends person8 { constructor(name: string) { super(name) }; eat() { console.log('多态: person8a的方法') }}let per8a = new person8a('person8a');per8a.eat();// 6.1 抽象方法 抽象类 :他是提供其他类继承的基类,不能被直接实例化// 用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体的实现并 必须在派生类中实现// abstract 抽象方法只能放在抽象类 里面//抽象类和抽象方法用来定义标准~~ 子类的基类 sabstract class person9 { public name: any; constructor(name: any) { this.name = name; }; abstract eat(): any;}class person9a extends person9 { //抽象类的子类必须继承 抽象类的方法 constructor(name: any) { super(name); } eat() { console.log(this.name); }}let p9 = new person9a('抽象类的子类');p9.eat();//7.1属性接口// ts 中定义方法function printLabel(label: string): void { console.log('printLabel:' + label);}// 对JSON进行约束function printLabel1(labelJson: { label: string }): void { console.log('printLabel:' + labelJson);}printLabel1({ label: 'a' }); // 正确写法// 对批量方法传入参数进行约束 接口//ts 接口//通过 interface 来定义接口interface fullName { firstName: string; secondName: string;}function printName(name: fullName) { // 必须传入对象 console.log(name.firstName + '...' + name.secondName)}let obj = { firstName: 'tong1', secondName: 'tong2', age: '111',}printName(obj);//7.2 接口 可选属性 参数数据可以不一样interface fullName1 { firstName: string; secondName?: string; // 增加 ?号 实现可传可不传}function printName1(name: fullName1) { // 必须传入对象 console.log(name.firstName + '...' + name.secondName)}let obj1 = { firstName: 'tong1', age: '111',}printName1(obj1);// 7.3 案例 ajax 原生 无兼容interface configData { type: string; url: string; data?: string; dataType: string;};function ajax(config: configData) { var xhr = new XMLHttpRequest(); xhr.open(config.type, config.url, true); // 异步 xhr.send(config.data); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log('seccess') if (config.dataType == 'json') { console.log(xhr.responseText); } else { console.log(xhr.responseText); } } }}ajax({ type: 'GET', url: 'http://a.itying.com/api/productlist', dataType: 'json', data: ''});// 7.4 函数类型接口 对函数的传入值和返回值进行约束interface encrypt { (key: string, value: string): string;}let md5: encrypt = function (key: string, value: string): string { //模拟操作 return key + value;}console.log(md5('tongmd', 'bb MD5 函数类型接口'));let sha11: encrypt = function (key: string, value: string): string { return key + value;}// 7.5 可索引接口 通常对数组对象的约束let arr = ['asd', 123];let arra1: number[] = [123, 123];let arra2: Array= [123, 123];interface userArr { // 对数组约束的接口 [index: number]: string;}let arra3: userArr = ['asd', '123']; // 可索引接口console.log(arra3[0]);// 7.6 可索引接口 对 对象的约束interface userObj { [index: string]: string}let userObj: userObj = { name: 'tong1'}// 7.7 可索引接口 对 对类的约束 和抽象类相似interface Animal1 { name: string eat(str: string): void;}class dog implements Animal1 { name: string; constructor(name: string) { this.name = name; } eat() { console.log(this.name + '的方法执行'); }}let doga1 = new dog('牛牛');doga1.eat();// 约束方法的 参数class cat implements Animal1 { name: string; constructor(name: string) { this.name = name; } eat(food: string) { console.log(this.name + '吃' + food); }}let cat1 = new cat('小猫');cat1.eat('鱼');// 8.0 接口的扩展interface Animal2 { eat(): void;}//实现接口的继承interface person2 extends Animal2 { work(): void;}class programmer { public name: string; constructor(name: string) { this.name = name; } coding(code: string) { console.log(this.name + code); }}//继承沿用 多个接口class web2 extends programmer implements person2 { // public name: string; constructor(name: string) { super(name); // 继承 programmer 这个接口 // this.name = name; } eat() { console.log(this.name + 'eat 方法执行'); } work() { console.log(this.name + 'work 方法执行'); }}let newWeb2 = new web2('接口继承实现');newWeb2.eat();newWeb2.work();newWeb2.coding('写ts code');//9.0 泛型 一个组件中 可以支持 未来未知的数据类型// 同时返回多种类型数据 string 和number// 可以使用any 来实现 多种数据类型的返回 但是放弃了类型检查function getData (value: T): T { //定义泛型 return value;}getData (123); //使用泛型 可以限定输入与输出的 数据类型一致//9.1 泛型类class minClass { public list: number[] = []; add(num: number) { this.list.push(num); } min(): number { var minNum = this.list[0]; for (let i = 0; i < this.list.length; i++) { if (minNum > this.list[i]) { minNum = this.list[i]; } } return minNum; }}var minN = new minClass();minN.add(9);minN.add(2);minN.add(1);minN.add(10);console.log(minN.min());// 类的泛型class minClass1 { public list: T[] = []; add(num: T) { this.list.push(num); } min(): T { var minNum = this.list[0]; for (let i = 0; i < this.list.length; i++) { if (minNum > this.list[i]) { minNum = this.list[i]; } } return minNum; }}let minN1 = new minClass1 (); // 实例化类 minN1.add(11);minN1.add(13);minN1.add(2);console.log(minN1.min());//9.3 泛型接口interface configFn { (value1: string, value2: string): string;}let getDataFn: configFn = function (value1: string, value2: string): string { return value1 + value2;}console.log(getDataFn('tong3', 'basd'));//泛型接口 写法1interface configFn1 { (value: T): T;}let getDataFn1: configFn1 = function (value: T): T { return value;}getDataFn1 ('tong4 泛型接口');//泛型接口 写法2interface configFn2 { (value: T): T;}function getDataFn2 (value: T): T { return value;}let myGetDataFn2: configFn2 = getDataFn2;myGetDataFn2('23');// 正确写法// myGetDataFn2(12); //与指定的类型不一致 错误写法