1. - 对对象的形状(Shape)进行描述
  2. - Duck Typing(鸭子类型)
  3. # 简而言之,接口就是一套规范和约束,可以约束对象函数,数组对象。

接口的作用:在面向对象的编程中,接口是一种规范。它定义了行为和事务的规范。在程序设计中,接口起到一种限制和规范的作用。
使用场景: 当一个对象类型被多次使用时,一般会使用接口interface来描述对象的类型,达到复用的目的。

  1. interface Animal{
  2. eat():any;
  3. run():any;
  4. }
  5. class Dog implements Animal{
  6. eat() {
  7. console.log("吃骨头")
  8. }
  9. run() {
  10. console.log("跑得快")
  11. }
  12. }

一、属性接口 对json的约束

传入对象

function http(obj:{url:string,method:string}):void{
    console.log(obj);
}
http({url:"top250",method:"get"})

属性接口可以对方法的传参进行约束

interface Params{
    url:string,
    method:string
}
function  http(data:Params):void{
    console.log(data);
}
http({url:"top",method:"get"});

二、接口:可选属性

interface Person {
    readonly id:number;
    name:string;
    /* 可选属性 */
    age?:number
}
let viking:Person ={
    id:1,
    name:"李四"
}
viking.id = 3;  //error  因为id是只读属性

三、函数类型接口

对函数参数和返回值的约束

/* 加密的函数类型接口 */
interface encrypt{
    //设置函数的参数-->返回值
    (key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
    return key+value;
}
console.log(md5("key","chengcheng"));

四、可索引接口

可索引接口:数组、对象的约束。(不常用)

var arr:number [] = [1,2,3];
var arr:Array<int> = [4,5,6];

4-1 数组接口

interface UserArr{
    //下标--> 元素
    [index:number]:string;
}
var arr:UserArr = ["html","css","javascript"];
console.log(arr[0])

4-2 对象接口

interface UserObj{
    [index:string]:string;
}
var obj:UserObj = {"name":"cheng"}

五、类类型接口:对类的约束 —重点

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name: string;
    constructor(name:string){
        this.name = name;
    }
    eat(str: string): void {
        console.log(str);
    }
}
var dog:Dog = new Dog("wangwang");
dog.eat("骨头");

六、接口的扩展:接口可以继承接口

interface Animal{
    name:string;
    eat(str:string):void;
}
interface Person extends Animal{
    work():void;
}
class Student implements Person{
    name: string;
    constructor(name:string){
        this.name = name;
    }
    work(): void {
       console.log("vue是我工作中最喜欢的框架")
    }   

    eat(str: string): void {
        console.log(str);
    }   
}

七、接口类


interface Animal{
    eat():void;
}
class Cat implements Animal{
    eat(){
        console.log("鱼")
    }
}
class Dog implements Animal{
    eat(){
        console.log("骨头")
    }
}
class Woman{
    feed(obj:Animal){
        obj.eat();
    }
}