TypeScript(十三) 接口混合化

这里就是把 Typescript 接口混合化

  • 可以把接口单独拿出去封装成一个接口

interface Person {
  name: string
  age: number
  sex: string
}

interface dosomething {
  (x: string): string
}

interface Man extends Person {
  do: dosomething
}

const Man_one: Man = {
  name: '张三',
  age: 18,
  sex: '男',
  do: function (x) {
    return x
  },
}
console.log(Man_one.do('哈哈哈'))
  • 下面是不拿走的直接嵌套

interface Human {
  name: string
  eat(x: string): void
}

const Human_all: Human = {
  name: '张三',
  eat: function (x) {
    console.log(x)
  },
}

Human_all.eat('哈哈哈')

接口和接口继承 接口和类继承

  • 类继承接口 implements

//定义了一个Human接口
interface Human {
  name: string
  eat(x: string): void
}

//让一个类继承这个接口 implements
//这里不一样的就是类继承了接口必须把接口的所有类型都写在类里

class Man implements Human {
  constructor(name: string) {
    this.name = name
  }
  name: string
  eat() {
    console.log(this.name)
  }
  sleep() {
    console.log('睡觉了')
  }
}

let Man_1 = new Man('张三')
Man_1.sleep()
Man_1.eat()
  • 接口继承接口 extends

//定义了一个Human接口
interface Human {
  name: string
  eat(x: string): void
}

interface Woman extends Human {
  run(): void
}

// 实例化这个继承接口
const Woman_One: Woman = {
  name: '小花',
  eat: function (x) {
    console.log(x)
  },
  run: function () {
    console.log('这就是小花的自定义属性')
  },
}

Woman_One.eat('小花的自定义属性')

Woman_One.run()
  • 多接口继承

interface Human {
  name: string
  eat(x: string): void
}

interface Woman extends Human {
  run(): void
}

interface Child {
  cry(): void
}

interface Girl extends Woman, Child {}

let girl: Girl = {
  name: '若曦',
  eat: function (x) {
    console.log(x)
  },
  run: function () {
    console.log('若曦奔跑')
  },
  cry: function () {
    console.log('若曦哭了')
  },
}

girl.eat('若曦的名字')
girl.run()
girl.cry()
  • 接口继承类
//接口继承类

class Auto {
  state = 1
}

// 接口继承类

interface AutoInterface extends Auto {}

// 接口只能约束类的共有成员

class C implements AutoInterface {
  state = 1
}

// Auto的子类 不必实现state属性继承类 state 属性 实现 AutoInterface 接口

class Bus extends Auto implements AutoInterface {}

文章作者: 雾烟云
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
  目录