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

接口的作用

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

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

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.接口-属性、函数、索引和类)