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