Typescript - 接口

原文:TypeScript基本知识点整理

 

零、序:

  接口定义:接口是对传入参数进行约束;或者对类里面的属性和方法进行声明和约束,实现这个接口的类必须实现该接口里面属性和方法;typescript中的接口用interface关键字定义。

  接口作用:接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。
 

一、属性接口

  对传入对象的约束,形式上很像 json 对象:

interface Sx {
    name : string
    age : number
}

function f8(peop:Sx) {
    //name age 必须传递
    console.log(peop)
}

const obj = {
    name : 'liu',
    age : 25
}
f8(obj)

  注意

  1. 不允许添加接口中未定义的属性;

 

二、函数类型的接口

  对方法传入的参数和返回值进行约束

interface Sta {
    (difang: string, todo: string): string
}

let play: Sta = (difang: string, todo: string): string => {
    return `我们去${difang}吃${todo}`
}

console.log(play('灞桥', '吃烧烤'))

 

三、可索引的接口

  对索引和传入的参数的约束

//对数组的约束
interface UserArr {
    //索引为number,参数为string
    [index: number]: string
}

const arr: UserArr = ['a', 'b']
console.log(arr)

//对 对象的约束
interface UserObj {
    [index: number]: number
}

const obj1: UserObj = { 2:1, 3:4 }
console.dir(obj1)

 

四、类的类型约束

interface Anmal {
    //对类里面的属性和方法进行约束
    name: string
    eat(food:string): void
}
// 类实现接口要用implements , 子类必须实现接口里面声明的属性和方法
class Laoshu implements Anmal{
    name: string
    constructor(name: string) {
        this.name = name
    }
    eat(food:string): void {
        console.log(`${this.name}吃${food}`)
    }
}
const lao: Laoshu = new Laoshu('老鼠')
lao.eat('粮食')

 

五、接口继承

interface Anmal {
  //对类里面的属性和方法进行约束
  name: string
  eat(food:string): void
}
//实现LaoHu的这个接口,必须也要实现LaoHu继承的Anmal接口中的方法
interface LaoHu extends Anmal{
  say (sa : string) : void
}
//继承并实现接口
class XiaoLaoHu implements LaoHu{
  name : string
  constructor (name : string) {
      this.name = name
  }
  eat (food : string) : void {
      console.log(`${this.name}吃${food}`)
  }
  say(sa: string): void {
      console.log(`${this.name}说${sa}`)
  }
}

const xiao : XiaoLaoHu = new XiaoLaoHu('老虎')
xiao.eat('肉')
xiao.say('你好')

 

posted @ 2019-06-17 10:18  shiweiqianju  阅读(165)  评论(0编辑  收藏  举报