TypeScript 接口协议（interface）详细分析

interface 在 ts 的含义：只声明成员方法，不做实现，定义了这个接口会有什么，但是没有告诉你具体是什么，可以用来约束一个函数，对象，以及类的结构和类型。

类可以被多个接口协议约束，类也可以作为接口使用，也就是 implements 后面可以添加 单个或多个 接口与类，文章尾部有案例。

格式：class 类名 implements 接口名, 接口名, 类名 ... {}

例如：class Person implements Action, Info {}

接口支持多继承。

格式：interface 接口名 extends 接口名, 接口名, 类名 ... {}

例如：interface Person extends Action, Info {}

对象类型接口

// 定义成员接口
interface Member {
  // 成员ID
  id: number,
  // 成员名称
  name: string
}

// 定义团队接口
interface Team {
  // 成员列表
  members: Member[]
}

// 发送团队用户 
function sendData(team: Team) {
  team.members.forEach(item => {
    console.log(item.id, item.name)
  })
}

// 模拟数据
let team = {
  members: [
    { id: 1, name: 'dzm' },
    { id: 2, name: 'xyq' }
  ]
}

// 发送数据
sendData(team as Team)

函数类型接口

// 定义函数类型接口（两种方式）
// 第一种
interface Calc {
  (x:number, y:number):number
}
// 第二种
// type Calc = (x:number, y:number) => number

// 加法
let add:Calc = (x, y) => { return x + y }
// 减法
let subtr:Calc = (x, y) => { return x - y }
// 输出
console.log(add(1, 2)) // 3
console.log(subtr(4, 3)) // 1

混合类型接口

// 定义混合类型接口
interface Mix {
  // 初始化构造方法
  (): void,
  // 消息
  msg: string,
  // 发送消息方法
  send(): void
}

// 初始化
function initMix () {
  let mix:Mix = (() => {}) as Mix
  mix.msg = 'dzm'
  mix.send = () => {
    console.log(mix.msg)
  }
  return mix
}

// 使用
let mix = initMix()
mix.send() // dzm

成员属性方法支持修饰符：【修饰符的详细使用】。

?：可选修饰符，也就是可以实现可不实现。

// 定义成员接口
interface Member {
  // 成员ID(只读)
  readonly id: number,
  // 成员名称(必须有)
  name: string
  // 成员名称(?: 可有可无)
  age?: number
}

接口的实现(implements)与继承(extends)

// 定义行动接口
interface Action {
  // 跑起来
  run():void
}

// 定义信息接口
interface Info {
  // 用户名称
  name: string
}

// 定义人接口，继承上面接口
interface Person extends Action, Info {
  // 个人ID
  id: number
}

// 定义一个类，实现上面 Person 接口
class Person1 implements Person {
  id: number
  name: string
  run(): void {
    console.log(`${this.name} 跑起来了`)
  }
}