TS中的接口

短命女 2023-01-02 05:26 190阅读 0赞

## TS中的接口 ##

接口也是定义标准,他比抽象类更加全面

#### 1.属性接口 ####

function printLabel(labelInfo:{ label:string}):void{ 
        console.log('对传入参数约束');
    }
    // printLabel('aaa')//错误写法
    printLabel({ label:'aaa'})//传入参数必须是以label为属性名的对象

对批量方法进行约束  
**可选属性接口** `firstName?: string;`

//定义标准
    interface FullName { 
        firstName: string;//以分号结束
        secondName: string;
    }
    function printName(name: FullName) { 
        //要求必须传入对象firstName secondName
        console.log(name.firstName + '----' + name.secondName);
    }
    //这种传参就只能穿firstName跟secondName传入age就会报错,这种写法只能是接口中的参数
    // printName({ 
    // age:20,
    // firstName:'张',
    // secondName:'三'
    // })
    //建议这样写,这样只需要包含接口中的参数就行,但是还是建议按照接口的规范写
    var obj = { 
        age: 20, //这个属性写了虽然不报错但是在继承接口规范的函数里找不到这个属性,因为他是跟着接口去找对应的,eg:name.age会报错
        firstName: '张',
        secondName: '三'
    }
    printName(obj);

#### 2.函数类型接口 ####

函数类型接口:对方法传入的参数,以及返回值进行约束,是批量的

//加密的函数类型接口
    interface encrypt{ 
        (key:string,value:string):string
    }
    var md5 :encrypt=function(key:string,value:string):string{ 
    	//加密算法
        return key+value
    }
    console.log(md5('name','张三'));

#### 3.可索引接口(不常用) ####

可索引接口:对数组,对象的约束

//可索引接口
    interface UserArr{ 
    	//索引类型:value类型,此标准是索引是数字类型,value是字符串类型
        [index:number]:string
    }
    var arr:UserArr=['111','222']
    console.log(arr[0]);//'111'

#### 4.类类型接口 ####

类使用接口用implements 关键字

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()

#### 4.接口继承 ####

interface Animal { 
        name: string;
        eat(): void
    }
    interface Person extends Animal { 
        work(): void
    }
    class Programer { 
        name:string;
        constructor(name:string) { 
            this.name=name
        }
        coding(code:string){ 
            console.log(`${ this.name}${ code}`);
        }
    }
    //继承类并且实现person接口,接口可以相互继承,类也可以
    class Web extends Programer implements Person { 
        constructor(name: string) { 
            super(name)
        }
        eat(){  //这个方法不写会报错,虽然我们只是继承person接口,但是这个接口是在animal标准之上建立的
            console.log(`${ this.name}喜欢吃馒头`);
        }
        work(){ //person接口标准
            console.log(`${ this.name}喜欢敲代码`);
        }
    }
    var w=new Web('阿斌')
    w.eat()//阿斌喜欢吃馒头
    w.work()//阿斌喜欢敲代码
    w.coding('在写ts')// 阿斌在写ts