Typescript--接口的使用

接口的定义

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范。在程序设计里，接口起到了限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心类内部的状态数据。也不关心这些类的内部方法实现的具体细节。他只关心这些类必须提供某些方法。提供这些方法的类就可以满足实际需求。typescript中的类有点类似于java，同时还增加了更加灵活的接口类型。包括属性，方法，可索引和类等。

属性接口

属性接口，就是对JSON的约束。实现一个对函数参数约束的接口。

function printLabel (labelInfo: {label: string}):void {
    console.log(labelInfo)
}

• 对批量方法的参数进行约束

  interface FullName {
      firstName: string;
      secondName: string; //  注意必须是;结尾
  }
  function printName (name: FullName) {
      //  必须传入的对象中有firstName,secondName,且必须都是string
  }
  printName({firstName: '小明', secondName: '小红'})
  printName('小红')   //  错误

  传入的参数必须要有接口中定义的字段一一对应,严格按照接口的定义传参

• 接口的可选属性
  接口中的可选属性用?表示

  interface FullName {
      firstName: string;
      secondName?: string;
  }

  在接口FullName中，firstName是一个必传属性，但是secondName则是一个可选属性。

函数类型接口

对方法的参数以及返回值进行约束。也可以对参数进行批量约束。

• 加密的函数类型接口

interface encrypt {
    (key:string, value:string):string
}

var md5:encrypt = function (key:string, value:string): string {
    return key + value
}

encrypt接口对md5函数实现了约束。

可索引接口

表示对数组和对象的约束。

• 对数组的约束，可索引约束：

  interface UserArr {
      [index:number]:string
  }
  var arr:UserArr = ['111', '333']

  接口UserArr约束索引是number,而值是个string
• 对对象的约束

  interface UserObj {
      [index:string]:string
  }
  var arr:UserObj = {name: 'xiaoming‘}

  接口UserArr约束索引是string,而值是个string

类类型接口，对类约束 和抽象类有点相似

interface Animal {
    name: string,
    eat(str:string):void
}
class Dog implements Animal {
    name: string,
    constructor (name: string) {
        this.name = name
    }
    eat (food:string) {
        console.log(this.name + food)
    }
}
var d = new Dag('小黑')
d.eat('粮食')

接口扩展：接口可以继承接口

接口和类一样也可以通过extends字段实现继承。

interface Animal {
    eat():void
}
interface Person extends Animal {
    work():void
}
class Web implements Person {
    public name: string;
    constructor(name:string) {
        this.name = name
    }
    eat() {
        console.log(this.name + '喜欢吃馒头')
    }
    work () {
        console.log(this.name + '敲代码')
    }
}
let web = new Web()
web.eat('小明') //  小明喜欢吃馒头
web.work('小黑')    //  小黑敲代码

interface Animal {
    eat():void
}
interface Person extends Animal {
    work():void
}
class Progromer {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    coding () {
        console.log(this.name + '敲打吗')
    }
}
class Web extends Progromer implements Person {
    constructor(name:string) {
        super(name)
    }
    eat() {
        console.log(this.name + '喜欢吃馒头')
    }
    work () {
        console.log(this.name + '敲代码')
    }
}
let web = new Web()
web.eat('小明') //  小明喜欢吃馒头
web.work('小黑')    //  小黑敲代码
web.coding('小李')  //  小李敲打吗

That’s interface!