接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。
1、属性类型接口
(1)属性接口
function printLabel(labelInfo:{label:string}):void {//属性约束
console.log('printLabel');
}
printLabel('hahah'); //错误写法
printLabel({name:'张三'}); //错误的写法
printLabel({label:'张三'}); //正确的写法
interface FullName{//属性接口,传入对象的约束
firstName:string;
secondName:string;
}
function printName(name:FullName){
// 传入的name必须具有firstName secondName两个字段
console.log(name.firstName+'--'+name.secondName);
}
printName('1213'); //错误
printName({ age:20,firstName:'张',secondName:'三'});//错误,传入的参数必须只包含firstName,secondName和属性接口对应.顺序可以不一致,类型必须一致
var obj={
age:20,
firstName:'张',
secondName:'三'
};
printName(obj);//传入的参数必须包含 firstName,secondName可以和属性接口不对应,但是在方法中不能访问多余的属性
(2)属性接口:可选属性,可传可不传
interface FullName{
firstName:string;
secondName?:string;
}
function getName(name:FullName){
console.log(name)
}
getName({firstName:20})//secondName可以不传入
2、函数类型接口
函数类型接口:对方法传入的参数 以及返回值进行约束
interface encrypt{
(key:string,value:string):string;//(参数类型约束):返回值类型约束
}
var a:encrypt=function(key:string,value:string):string{
return key+value;
}
3.可索引接口
数组、对象的约束 (不常用)
//ts定义数组的方式
var arr:number[]=[2342,235325]
var arr1:Array<string>=['111','222']
//可索引接口 对数组的约束
interface UserArr{
[index:number]:string//索引值必须是number,元素类型是string
}
var arr:UserArr=['aaa','bbb'];
var arr:UserArr=[123,'bbb']; /*错误*/
//可索引接口 对对象的约束
interface UserObj{
[index:string]:string//属性名是string类型,属性值是string类型
}
var arr:UserObj={name:'张三'};
4.类类型接口
对类的约束和抽象类抽象有点相似
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){//不传入参数也是正确的,但是没有方法实现会出错
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小狗');
d.eat();
5.接口扩展
接口可以继承接口
interface Animal{
eat():void;
}
interface Person extends Animal{
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+'写代码');
}
}
var w=new Web('小李');
w.eat();