接口
- 接口的作用:在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面，接口起到了一种限制和规范的作用
- 接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的实现细节，它只规定这批类里面必须提供某些方法，提供这些方法的类就可以满足实际需要
- typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等
Typescript中的接口
标准写法
//定义接口interface FullName{ firstName:string; secodeName:string;}//声明方法,传入的参数为接口中定义的类型function printName(name:FullName){ console.log(name.firstName + name.secodeName);}//调用方法，传入定义好的接口，参数printName({ firstName:'aa', secodeName:'bb'}); 
顺序可调乱
interface FullName{ firstName:string; secodeName:string;}function printName(name:FullName){ console.log(name.firstName + name.secodeName);}printName({ secodeName:'bbb', firstName:'aaa',}); 
另一种正确写法，传入的参数可比定义的多
interface FullName{ firstName:string; secodeName:string;}function printName(name:FullName){ console.log(name.firstName + name.secodeName);}var obj = { age:20, firstName:'cc', secodeName:'dd'}printName(obj); 
错误写法
数据类型不一致
数量不一致
可选参数?
interface FullName{ firstName:string; secodeName?:string;}function printName(name:FullName){ console.log(name);}printName({ firstName:'aa'})printName({ firstName:'aa', secodeName:'bb'}) 
属性类型接口(ajax)
interface Config{ type:string; url:string; data?:string; dataType:string;}function ajax(config:Config) { 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('chengong'); if (config.dataType == 'json') { console.log(JSON.parse(xhr.responseText)); } else { console.log(xhr.responseText); } } };}//可选参数data,不传dataajax({ type: 'get', url: 'http://a.itying.com/api/productlist', dataType: 'json'});//可选参数data,传dataajax({ type: 'get', data: 'name=zhangsan', url: 'http://a.itying.com/api/productlist', dataType: 'json'}); 
函数类型口
对方法传入的参数，以及返回值进行约束
可能批量，对应多个方法interface encrypt{ (key:string,value:string):string;}var md5:encrypt = function(key:string,value:string):string{ return key+value;}console.log(md5('name','lisi'));var sha1:encrypt = function(key:string,value:string):string{ return key+'---'+ value;}console.log(sha1('name','wanwu')); 
可索引接口
数组
正确
interface UserArr{ [index:number]:string}var arr:UserArr=['123','456'];console.log(arr[0]); 
错误
interface UserArr{ [index:number]:string}var arr:UserArr=[123,'bbb'];console.log(arr[0]); 
对象
interface UserObj{ [index:string]:string;}var arr:UserObj= {name:'list'};console.log(arr.name) 
类类型接口
- 对类的约束
- 和抽象类抽象有点相似，比抽象类更强大
- implements为类实现接口
- 接口中的属性和方法都要有
正确
interface Animall{ name:string; eat(str:string):void;}class Dogg implements Animall{ name:string; constructor(name:string){ this.name = name; } eat(){ console.log(this.name+'吃粮食') }}var dd = new Dogg('小黑');dd.eat();class Catt implements Animall{ name:string; constructor(name:string){ this.name = name; } eat(food:string){ console.log(this.name + '吃' + food); }}var cc = new Catt('小花猫');cc.eat('老鼠'); 
错误
类中没有对应的方法
interface Animall{ name:string; eat(str:string):void;}class Dogg implements Animall{ name:string; constructor(name:string){ this.name = name; }}var dd = new Dogg('小黑');dd.eat(); 
接口拓展:接口可以继承接口
一个类实现二个接口
// 动物接口interface Animalll{ eat():void;}//人接口，人属性动物interface Person extends Animalll{ work():void;}//前端类class Web implements Person{ public name:string; constructor(name:string){ this.name = name; } eat(){ console.log(this.name +'吃米粉'); } work(){ console.log(this.name + '写js'); }}var w = new Web('小李');w.eat()w.work() 
一个类继承父类，并实现2个接口(一个接口继承另一个接口)
// 动物接口interface Animalll{ eat():void;}//人接口，人属性动物interface Person extends Animalll{ work():void;}//程序员类class Programmer{ public name:string; constructor(name:string){ this.name = name; } conding(code:string){ console.log(this.name + code); }}//前端类class Web extends Programmer implements Person{ constructor(name:string){ super(name) } eat(){ console.log(this.name +'吃米粉'); } work(){ console.log(this.name + '写js'); }}var w = new Web('小李');w.eat()w.work()w.conding('写代码') 