接口:行为和动作的规范,对批量方法进行约束,关键词 interface
1、属性接口
//定义属性接口规范 interface FullName{ firstName:string;//注意结束用分号 secondName:string; } //定义参数name规范为FullName规范 function printName(name:FullName){ console.log(name.firstName,name.secondName) } //如果直接把对象传入参数,必须传入对象必须是定义的FullName规范 printName({ firstName:'张三', secondName:'李四' }); //如果以下面这种方式,则传入对象只要包含FullName里的属性即可 var obj ={ age:20, firstName:'张三', secondName:'李四' } printName(obj);
2、可选属性接口
//可选属性后面加问号即可 interface FullName{ firstName:string; secondName?:string; //可传,可不传 } function printName(name:FullName){ console.log(name) } printName({ firstName:'张三' });
3、函数接口
//函数类型接口:对方法进行传入的参数,以及返回值进行约束 interface unserInfo{ (key:string,value:number):string; } var fun1:unserInfo = function(key:string,value:number):string{ return `${key}:${value}` } fun1('张三',20) var fun2:unserInfo = function(key:string,value:number):string{ return `${key}:${value}` } fun2('李四',30)
4、类 类型接口
//案例如下:定义一个类 ,必须有属性name且是string类型,有eat方法且没有返回值,参数为string类型 interface Animal{ name:string; eat(str:string):void; } //关键词 implements 实现接口 class Dog implements Animal{ name:string; constructor(name:string){ this.name = name; } eat(food:string):void{ console.log(this.name+'吃'+food) } } var d = new Dog('小黑') d.eat('蛋糕');
5、接口扩展:接口可以继承接口
//定义 Animal接口规范 interface Animal{ eat():void; } //定义Person接口规范 并继承 Animal接口 interface Person extends Animal{ work():void; } //定义Web类 并实现接口Person规范 class Web implements Person{ plublic name:string; constructor(name:string){ this.name = name; } eat(){ console.log(this.name) } work(){ console.log(this.name + '写代码') } } var w = new Web('小明') w.eat(); w.work();
//定义 Animal接口规范 interface Animal{ eat():void; } //定义Person接口规范 并继承 Animal接口 interface Person extends Animal{ work():void; } //定义一个Programmer类 class Programmer { plublic name:string; constructor(name:string){ tihs.name = name; } coding(code:string){ console.log(this.name + code) } } //定义一个Web类,继承Programmer类,并实现接口Person规范 class Web extends Programmer implements Person{ constructor(name:string){ super(name) } eat(){ console.log(this.name) } work(){ console.log(this.name + '写代码') } } var w = new Web('小明') w.coding('写ts代码')