05_TypeScript接口

接口：行为和动作的规范，对批量方法进行约束，关键词 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代码')

猜你喜欢