ts中接口
前言：ts定义接口的任意一个属性
interface IPerson { name: string age: number family?: any[] // Error，因为不是任意类型的子集 [propName: string]: string | number // 一般设置 any，因为其他类型必需是任意类型的子集 [propName: string]: any // 一个 interface 中任意属性只能有一个 }
ts中接口，接口是代码的一种规范、约束和规定，ts中接口可分为以下几类：
- 对象型接口 ：对对象的规范
- 函数型接口 ：对函数的规范
- 可索引(数组型)接口:对数组(or对象)的规范
- 类类型接口: 对类的规范
- 其他接口：泛型接口、继承接口的接口 等
1. 对象型接口
1 interface Fullname { 2 firstName: string; 3 secondName: string; 4 flag?: boolean; 5 } 6 function printName({firstName, secondName, flag}: Fullname) { //解构 objName: Fullname 7 console.log(firstName); 8 console.log(secondName); 9 if(flag){} 10 } 11 printName({ firstName: "shun", secondName: "ershun" });
案例：用对象型接口封装原生ajax请求
1 interface Config{ 2 type:string; //get post 3 url:string; 4 data?:string;//可选传入 5 dataType:string;//json xml等 6 } 7 8 //原生js封装的ajax 9 function ajax(config:Config){ 10 11 var xhr=new XMLHttpRequest(); 12 xhr.open(config.type,config.url,true); 13 14 if(config.data){ 15 xhr.send(config.data); 16 }else{ 17 xhr.send(); 18 } 19 20 xhr.onreadystatechange=function(){ 21 22 if(xhr.readyState==4 && xhr.status==200){ 23 console.log('请求成功'); 24 if(config.dataType=='json'){ 25 console.log(JSON.parse(xhr.responseText)); 26 }else{ 27 console.log(xhr.responseText) 28 } 29 } 30 } 31 } 32 33 34 ajax({ 35 type:'get', 36 data:'name=zhangsan', 37 url:'http://www.example.com/api', // api接口url 38 dataType:'json' 39 })
2. 可索引类型接口（数组，数组对象）
1 /* 2 * ts中接口 3 * 可索引(数组型)接口 数组 可索引对象(hash、堆栈) 不常用 4 * */ 5 6 //可索引接口 7 interface UserArr{ 8 //定义索引key为number类型，索引值为string类型 9 [index:number]:string 10 } 11 12 var arr1:UserArr; 13 arr1=["aa","bb","cc"]; 14 var arr2: UserArr 15 arr2={1:"hello",2:"world"}; 16 console.log(arr1); 17 console.log(arr2); 18 19 20 /* 21 * ts中接口 22 * 可索引(数组对象) 23 * */ 24 interface hanleA { 25 [index:number]:hanleB 26 } 27 28 interface hanleB { 29 name: string, 30 age: number, 31 flag?: boolean 32 } 33 function handleReduce(arr: hanleA) { 34 console.log(arr) 35 } 36 37 handleReduce([{name: 'shun', age: 12}, {name: 'enne', age: 12}])
3.类类型接口
1 /* 2 * ts中接口 3 * 类类型接口: 对类的规范 ,这种类型的接口在传统面向对象语言中最为常见， 4 * 比如java中接口就是这种类类型的接口 。这种接口与抽象类比较相似，但是接口只能含有为抽象方法、成员属性。 5 * 实现类中必须实现接口中所有的抽象方法和成员属性。 6 * */ 7 8 interface Animal{ 9 name:string; 10 eat(s:string):string; 11 } 12 13 //实现接口使用implements关键字，继承 使用extends关键字 14 //狗类 15 class Dog implements Animal{ 16 name:string; 17 constructor(name:string){ 18 this.name=name; 19 } 20 //实现接口中抽象方法 21 eat(s){ 22 return this.name+"吃肉:"+s; 23 } 24 } 25 //猫类 26 class Cat implements Animal{ 27 name:string; 28 constructor(name:string){ 29 this.name=name; 30 } 31 //实现接口中抽象方法 32 eat(s){ 33 return this.name+"吃鱼:"+s; 34 } 35 } 36 37 var dog=new Dog("tom"); 38 var cat=new Cat("kitty"); 39 console.log(dog.eat("五花肉")); 40 console.log(cat.eat("乌鳢鱼"));
4.泛型函数、泛型类、泛型接口
1 /* 2 * ts中泛型 3 * 泛型就是在编译期间不确定方法的类型(广泛之意思)，在方法调用时，由程序员指定泛型具体指向什么类型 4 */ 5 6 //1 泛型函数 7 8 /** 9 * 获取数组中最小值 （数字） 10 * @param {number[]} arr 11 * @returns {number} 12 */ 13 function getMinNumber(arr:number[]):number{ 14 var min=arr[0]; 15 arr.forEach((value)=>{ 16 if(value<min){ 17 min=value; 18 } 19 }); 20 return min; 21 } 22 23 /** 24 * 获取数组中最小值 （字符串） 25 * @param {number[]} arr 26 * @returns {number} 27 */ 28 function getMinStr(arr:string[]):string{ 29 var min=arr[0]; 30 arr.forEach((value)=>{ 31 if(value<min){ 32 min=value; 33 } 34 }); 35 return min; 36 } 37 38 console.log(getMinNumber([1, 3, 5, 7, 8]));//1 39 console.log(getMinStr(["tom","jerry","jack","sunny"]));//jack 40 41 /** 42 * 获取数组中最小值 (T泛型通用) 43 * @param {T[]} arr 44 * @returns {T} 45 */ 46 function getMin<T>(arr:T[]):T{ 47 var min=arr[0]; 48 arr.forEach((value)=>{ 49 if(value<min){ 50 min=value; 51 } 52 }); 53 return min; 54 } 55 56 console.log(getMin([1, 3, 5, 7, 8])); 57 console.log(getMin(["tom","jerry","jack","sunny"])); 58 59 60 //2 泛型类 61 class GetMin<T>{ 62 arr:T[]=[]; 63 add(ele:T){ 64 this.arr.push(ele); 65 } 66 min():T{ 67 var min=this.arr[0]; 68 this.arr.forEach(function (value) { 69 if(value<min){ 70 min=value; 71 } 72 }); 73 return min; 74 } 75 } 76 var gm1= new GetMin<number>(); 77 gm1.add(5); 78 gm1.add(3); 79 gm1.add(2); 80 gm1.add(9); 81 console.log(gm1.min()); 82 83 var gm2= new GetMin<string>(); 84 gm2.add("tom"); 85 gm2.add("jerry"); 86 gm2.add("jack"); 87 gm2.add("sunny"); 88 console.log(gm2.min()); 89 90 91 92 /** 93 * 3 泛型函数接口 94 */ 95 interface ConfigFn{ 96 <T>(value:T):T; 97 } 98 99 var getData:ConfigFn=function<T>(value:T):T{ 100 return value; 101 } 102 getData<string>('张三'); 103 // getData<string>(1243); //错误 104 105 106 // 类似 Map<String,Object> Param 接口 107 interface Param{ 108 [index:string]:any 109 } 110 111 112 113 //4 泛型类接口 114 115 /** 116 * page分页对象 117 */ 118 class Page{ 119 private currentPage:number=1; //当前页码 默认1 120 private pageSize:number=10;//每页条数 默认为10 121 private sortName:string; //排序字段 122 private sortOrder:string="asc"; // 排序规则 asc | desc 默认为asc正序 123 124 125 constructor(param:Param){ 126 if(param["currentPage"]){ 127 this.currentPage=param["currentPage"]; 128 } 129 if(param["pageSize"]){ 130 this.pageSize=param["pageSize"]; 131 } 132 if(param["sortName"]){ 133 this.sortName=param["sortName"]; 134 } 135 if(param["sortOrder"]){ 136 this.sortOrder=param["sortOrder"]; 137 } 138 } 139 140 public getStartNum():number{ 141 return (this.currentPage-1)*this.pageSize; 142 } 143 } 144 145 146 class User{ 147 id:number;//id主键自增 148 name:string;//姓名 149 sex:number;//性别 1男 2女 150 age:number;//年龄 151 city:string;//城市 152 describe:string;//描述 153 154 } 155 156 //泛型接口 157 interface BaseDao<T> { 158 findById(id:number):T;//根据主键id查询一个实体 159 findPageList(param:Param,page:Page):T[];//查询分页列表 160 findPageCount(param:Param):number;//查询分页count 161 save(o:T):void;//保存一个实体 162 update(o:T):void;//更新一个实体 163 deleteById(id:number);//删除一个实体 164 } 165 166 /** 167 * 接口实现类 168 */ 169 class UserDao<User> implements BaseDao<User>{ 170 findById(id:number):User{ 171 172 return null; 173 } 174 findPageList(param:Param,page:Page):User[]{ 175 return []; 176 } 177 findPageCount(param:Param):number{ 178 return 0; 179 } 180 save(o:User):void{ 181 182 } 183 update(o:User):void{ 184 185 } 186 deleteById(id:number){ 187 188 } 189 }
5.函数型接口
1 /* 2 * ts中接口 3 * 函数型接口 ,非常类似于java、c#中使用lambda表达式传入匿名函数 4 * 5 * */ 6 // 7 // //对两个数进行运算得到另一个数 函数型接口 8 interface CalcTwo{ 9 (a:number,b:number):number; 10 } 11 12 13 /** 14 * 计算数组被某种算法运算的结果 15 * @param {number[]} arr 数组 16 * @param {CalcTwo} calc 用户指定的算法函数 17 * @param {number} initVal 传入初始值 18 * @returns {number} 得到最终运算结果 19 */ 20 function calcArr(arr:number[],calc:CalcTwo,initVal:number):number{ 21 var result=initVal; 22 arr.forEach((value)=>{ 23 result = calc(result,value); 24 }); 25 26 return result; 27 } 28 29 var arr:number[]=[1,3,5,7,9]; 30 var add=function(a:number,b:number):number{ 31 return a+b; 32 }; 33 34 var multiply=function(a:number,b:number):number{ 35 return a*b; 36 }; 37 console.log("相加",calcArr(arr, add, 0));//25 38 console.log("相乘",calcArr(arr, multiply, 1));//945 39 //或者直接传入一个匿名函数亦可 40 var s1=calcArr(arr,function(a,b){ 41 return a*b; 42 },1); 43 console.log("s1",s1);//945 44 45 var s2=calcArr(arr,function (a,b) { 46 return (a+1)*(b+1); 47 },1); 48 console.log("s2",s2);//10170
