我的前端坑
  • 关于本书
  • CSS JS 常用
    • 常用 CSS 样式
    • 坑爹的 CSS
    • sass 入门
    • canvas 总结
    • 常用 JS 函数
    • 表单和 FormData 对象
    • 水平滑动 tab 居中
    • js 中的 this
    • sse 和 fetch
    • js 原型链与 class 类
  • TypeScript
    • TS 概念
    • interface 与 type
    • interface 接口
    • Ts 配合 ESLint 和 prettier
  • 小程序
    • 常用小程序代码
  • VUE
    • VUE2 小技巧
    • VUE-CLI 中的 NODE_ENV
  • VUE3
    • VUE3 自行构建 sfc 遇到的坑
    • VUE3 v-model 的实现
    • VUE3 使用总结
    • VUE3 ref
  • vite
    • vite
  • http 请求
    • 前端实现下载
    • cors 跨域请求
    • windows hosts 文件
    • err_blocked_by_client 错误
  • 前端工具
    • npm 和 Node
      • 常见问题
      • npmTips
      • package.json 与 package-lock.json
      • npx
      • exports 与 module.exports
      • ESLint
    • VIM
      • vim 常用
    • Git
      • Git 常用命令
      • Git 小 tips
    • express
  • 后端工具
    • mysql 常见问题
    • docker 常见问题
    • docker
  • java
    • java 常用
    • lambda 表达式
    • java 字符串
    • java 泛型
    • java 反射
    • intellij IDEA
    • 多态
    • java 包管理
    • sql 查询语言
    • java 反射
    • java 异常
    • java 集合
    • spring
  • 命令行
    • 命令行 常用
  • 专利撰写 ppt
  • 后台简述
Powered by GitBook
On this page
  • 类实现接口
  • 接口继承接口
  • 接口继承类

Was this helpful?

  1. TypeScript

interface 接口

接口声明是命名对象类型的另一种方式,是一系列抽象方法的声明,接口定义的方法需要具体的类来实现。 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

interface IPerson {
  readonly id: number // 只读属性
  firstName: string // 必传属性
  lastName: string
  age?: number // 可选属性
  talk: () => void
  run: string | string[] | (() => string) // 联合类型
  [propName: string]: any // 任意属性
}

const person: IPerson = {
  id: 1,
  firstName: '屁虫',
  lastName: '放',
  run: '我会跑步',
  talk() {
    console.log(`我的名字是${this.lastName}${this.firstName}`)
  },
  dance() {
    console.log('我会跳舞')
  }
}
person.talk()

赋值的时候,变量的形状必须和接口的形状保持一致,属性不能多也不能少,不然会编译时报错 一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

类实现接口

// 报警器
interface Alarm {
  // 报警功能
  alert(): void
  // 监视功能
  watch(): void
}
// 灯光功能
interface Light {
  lightOn(): void
  lightOff(): void
}
// 创建 门 类,实现 报警器 功能
class Door implements Alarm {
  public static className = '门'
  public name: string
  constructor(name: string) {
    this.name = name
  }
  public alert(): void {
    console.log('我会报警功能')
  }
  public watch(): void {
    console.log('我会监视功能')
  }
}

const door: Door = new Door('盼盼安全门')
door.alert()
console.log(Door.className)

// 创建 汽车 类,也实现 报警器 功能
class Car implements Alarm, Light {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  public alert(): void {
    console.log('我会报警功能')
  }
  public watch(): void {
    console.log('我会监视车辆安全')
  }
  public lightOn(): void {
    console.log('打开灯光')
  }
  public lightOff(): void {
    console.log('关闭灯光')
  }
}

接口继承接口

interface Alarm {
  alert(): void
}

interface LightableAlarm extends Alarm {
  lightOn(): void
  lightOff(): void
}

接口继承类

TypeScript 中接口也可以继承类,因为声明一个类的同时,也会创建和类同名的一个类型,只不过同名类型不包括类中的构造函数、静态属性、静态方法:

// 声明一个类
class Point {
  x: number
  y: number
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
}
// 同时会暗地里创建一个同名的类型
interface PointInstanceType {
  x: number
  y: number
}
Previousinterface 与 typeNextTs 配合 ESLint 和 prettier

Last updated 2 years ago

Was this helpful?