typeScript知识点之接口的定义和使用

前言

typescript中的接口。跟java中的用法基本上是一样的,跟类也有类似的地方,比较简单,其目的也是为了规范代码,例如定义一个属性接口,则传入的数据必须包含这些字段,如果定义一个方法的接口,则实现他的类必须实现他的所有方法。

属性类接口

属性类接口,就是定义一个接口,里面有n个字段,然后作为参数,或者结果接受,这样可以规范参数的名称和类型。
传统的typescript中是这样写的

function printLabel(label:string):void {
    console.log('printLabel');
}
printLabel('hahah');

传入的参数,第一是可以随便写,随便定义,不规范。如果使用接口的话

interface FullName{
    firstName:string;   //注意;结束
    secondName:string;
}

var obj={   /*传入的参数必须包含 firstName  secondName,而且可以加入其他属性*/
    age:20,
    firstName:'张',
    secondName:'三'
};
printName(obj);

//如果用直接传入的方式,必须包含firstName  secondName,并且不能有其他属性
printInfo({
    firstName:'李',
    secondName:'四'
})

当然也是有可选属性,也是跟原来一样,用问号表示,传值得时候,可传可不传

interface FullName{
    firstName:string;
    secondName?:string;
}

函数类型接口

接口中写一个函数,可以定义该函数所需传入的值以及其类型,并且定义改函数的返回值类型。

interface encrypt{
    (key:string,value:string):string;
}

var md5:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+value;
}

可索引接口

可索引接口指的是有一些参数是数组,或者是对象结构的,需要用索引接口定义
对数组的约束:

interface UserArr{
    [index:number]:string
}
var arr:UserArr=['aaa','bbb'];

对对象的约束:

interface UserObj{
    [index:string]:string
}
var arr:UserObj={name:'张三'};

类类型接口

这个跟类有像,接口中定义方法,实现它的类,都必须实现接口中的方法

interface Animal{
    name:string;
    eat(str:string):void;
}
class Cat implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(food:string){
        console.log(this.name+'吃'+food);
    }
}
var c=new Cat('小花');
c.eat('老鼠');

其他用法

接口还可以继承接口,但用的不太多,/实现接口,就必须实现其父接口以及子接口的方法,并且同时还可以继承其他类,然后直接调用其父类的方法。


//父接口
interface Animal{
    eat():void;
}
//子接口
interface Person extends Animal{
    work():void;
}
class Programmer{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    coding(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+'写代码');
    }
    
}

var w=new Web('小李');
//除了可以调用实现接口的方法,还可以调用其继承父类的方法
w.coding('写ts代码');
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页