美文网首页个人学习
5.接口-属性、函数、索引和类

5.接口-属性、函数、索引和类

作者: 我只会吃饭 | 来源:发表于2020-02-14 11:28 被阅读0次

    接口的作用

    在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范, 在程序设计里面,接口起到了限制和规范的作用
    接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,不关心类方法里面实现的细节,它只规定这批类里面必须提供某些方法,
    提供这些方法的类就可以满足实际需要

    接口的类型: 属性、函数、可索引和类等;

    1. 属性接口

    interface FName {
        fName: string;
        sName: string
    }
    
    
    function say(foo:FName):string {
        return `我的名字叫 ${foo.fName + foo.sName}`;
    }
    
    // 正确的  传入的参数需要符合接口的定义
    console.log(say({fName: '胡', sName:'火锅'}));
    
    let bar = {
        fName: '胡',
        sName:'火锅',
        age: 4
    }
    
    // 正确的, 定义在外的对象
    console.log(say(bar));
    // 错误
    // console.log(say({firstName: '胡', secondName:'火锅', age: 4}));
    
    可选属性
    interface  FName {
        fName: string;
        sName: string;
        age?:number; // 可选的属性
    }
    
    function SayName(foo:FName):string {
        return `我的名字叫 ${foo.fName + foo.sName}`;
    }
    
    console.log(SayName({fName: '胡', sName:'火锅', age: 4}));
    console.log(SayName({fName: '胡', sName:'火锅'}));
    

    2. 函数接口

    对函数传入的参数及返回值进行约束

    interface Say {
        // 函数的参数               函数的返回值
        (fname:string, age: number):string
    }
    
    // 正确的
    const speak:Say = function (fname:string, age:number):string {
        return `我的名字${fname}, 年龄为${age}`;
    }
    
    const say:Say = (fname:string, age:number):string => {
        return `我的名字${fname}, 年龄为${age}`;
    }
    
    
    
    // 函数接口中的可选参数
    /*
    interface Say {
        (fname: string, age?: number):string
    }
    // 如果age 不传值会变成undefined
    const speak:Say = function (fname:string, age?:number):string {
        return `我的名字${fname}, 年龄为${age}`;
    }
    
    const say:Say = (fname:string, age?:number):string => {
        return `我的名字${fname}, 年龄为${age}`; 
    }
    */
    

    3. 可索引接口

    对数组、对象的约束

    数组的约束
    interface ArrIndex {
        [index: number]:string
    }
    
    let arr:ArrIndex = ['1', '2'];
    
    对象的约束
    interface OPropName {
        [propName: string]:string
    }
    
    let obj:OPropName = {
        1: 'a'
    }
    

    3. 类类型接口

    对类的约束 (类似抽象类)

    // 回顾 抽象类
    /*
    abstract class Animal {
        abstract fname:string; // 抽象属性
        abstract eat(food:string):void // 抽象方法
    }
    
    class Dog extends Animal {
        fname:string;
        constructor(n:string) {
            super();
            this.fname = n;
        }
        eat(food:string) {
            console.log(`${this.fname}喜欢吃${food}`)
        }
    }
    */
    
    // 定义类类型接口
    
    interface Animal {
        fname:string;
        eat(food:string):void
    }
    
    class Dog implements Animal {
        fname:string;
        constructor(n:string) {
            this.fname = n;
        }
        eat(food:string) {
            console.log(`${this.fname}喜欢吃${food}`)
        }
    }
    
    let dog = new Dog('可乐');
    
    console.log(dog);
    dog.eat('胡萝卜');
    

    相关文章

      网友评论

        本文标题:5.接口-属性、函数、索引和类

        本文链接:https://www.haomeiwen.com/subject/oyjpxhtx.html