接口

例子

interface Label {
  label: string
}

function printLabel(labelObj: Label) {
  console.log(labelObj.label)
}

接口就像是一个名字，来描述一个变量的要求或者规则。类型检查不会检查顺序，只要属性存在和类型正确就可以了。

可选属性

interface Water {
  name?: string
  age?: number
}

可选属性就是可以有也可以没有

只读属性

interface Water {
  readonly name: string
  readonly age: number
}

属性只可读不可更改重新赋值

可读数组

去除所有可以改变数组的方法

let arr: number[] = [1, 2, 3, 4]
let re: ReadonlyArray<number> = a
let to: ReadonlyArray<number> = [1, 2, 3, 4]
arr = re as number[]

可读数组是不能赋值到普通数组的，但是可以用断言的方式从写

readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。

带有其他任何属性

interface Water {
  color?: string
  width?: number
  [propName: string]: any
}

// 会绕开额外的属性检查，不提倡使用
let squareOptions = { colour: 'red', width: 100 }
let mySquare = createSquare(squareOptions)

函数类型

interface Func {
  (source: string, subString: string): boolean
}

let myFunc: Func
myFunc = function (source: string, subString: string) {
  let result = source.search(subString)
  return result > -1
}

可索引的类型

interface Water {
  [index: number]: string
}

let myArray: Water
myArray = ['a', 'b']
let myStr: string = myArray[0]

TypeScript 支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript 会将它转换成string然后再去索引对象。 也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

类类型

• 实现接口

// 1
interface ClockInterface {
  currentTime: Date
}

class Clock implements ClockInterface {
  currentTime: Date
  constructor(h: number, m: number)
}

// 2
interface ClockInterface {
  currentTime: Date
  setTime(d: Date)
}

class Clock implements ClockInterface {
  currentTime: Date
  setTime(d: Date) {
    this.currentTime = d
  }
  constructor(h: number, m: number) {}
}

• 类静态部分和实例部分的区别

interface ClockConstructor {
  new (hour: number, minute: number): ClockInterface
}

interface ClockInterface {
  tick()
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
  return new ctor(hour, minute)
}

class DigitalClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log('beep beep')
  }
}
class AnalogClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log('tick tock')
  }
}

let digital = createClock(DigitalClock, 12, 17)
let analog = createClock(AnalogClock, 7, 32)

因为createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数签名。

继承接口

interface Shape {
  color: string
}

interface Square extends Shape {
  sideLength: number
}

let square = <Square>{}
square.color = 'blue'
square.sideLength = 10

// 继承多个接口
interface Shape {
  color: string
}

interface PenStroke {
  penWidth: number
}

interface Square extends Shape, PenStroke {
  sideLength: number
}

let square = <Square>{}
square.color = 'blue'
square.sideLength = 10
square.penWidth = 5.0

混合类型

interface Counter {
  (start: number): string
  interval: number
  reset(): void
}

function getCounter(): Counter {
  let counter = <Counter>function (start: number) {}
  counter.interval = 123
  counter.reset = function () {}
  return counter
}

let c = getCounter()
c(10)
c.reset()
c.interval = 5.0

接口继承类

class Control {
  private state: any
}

interface SelectableControl extends Control {
  select(): void
}

class Button extends Control implements SelectableControl {
  select() {}
}

class TextBox extends Control {
  select() {}
}

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
  select() {}
}

class Location {}