前言：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
