typescript-logo.jpg

什么是接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都是抽象的，需要由具体的类实现。其实就是一些共有的属性和方法，为了方便管理而已。

// 定义
interface interface_name {
    
}

牛刀小试

interface labelValue {
    label: string  
}
function printLabel(labelObj: labelValue) {
    console.log(labelObj.label)
}
let myObj = {size: 10, label: 'this is string'}
printLabel(myObj)

属性可选

有的时候我们需要属性是可选的

interface SquareConfig {
    color?: string;
    width?: number;
}
function creatSquare(config: SquareConfig): {color: string; area: number} {
 let newSquare = {color: 'red', area: 100}
 if (config.color) {
    newSquare.color = config.color
 }
 if (config.width) {
    newSquare.area = config.width * config.width
 }
 return newSquare
}
let mySquare = creatSquare({color: 'green'})

属性只读

当我们需要有的属性只能是创建的时候才能改变其值时，可以使用readonly

interface Point {
    readonly x: number
    readonly y: number
}
let p1: Point = {x: 10, y: 20}
p1.x = 30

// Cannot assign to 'x' because it is a read-only property.

typescript还有一个ReadonlyArray<T>，数组创建后将无法修改任何值

let num: number[] = [1, 2, 3]
let cop: ReadonlyArray<number> = num
cop[0] = 12 // Index signature in type 'readonly number[]' only permits reading.
cop.push(5) // Property 'push' does not exist on type 'readonly number[]'
cop.length = 20 // Cannot assign to 'length' because it is a read-only property

函数类型

接口除了可以用来描述普通对象，还可以用来表示函数类型，参数列表的每个参数都需要名字和类型

interface searchFunc {
    (source: string, subString: string): boolean
}
let mySearch: searchFunc
// 函数的参数名不需要和接口中定义的名字相匹配
mySearch = function (source: string, sub: string) {
    let result = source.search(sub)
    return result > -1
}

可索引的类型

接口中可像JavaScript中数组（a[5]）或者对象（obj['aa']）那样，可通过索引获得

interface StringArr {
    [index: number]: string
}
let myArr: StringArr
myArr = ['tom', 'jerry']
let myStr: string = myArr[0] // myStr === 'tom'

ps: 索引支持两种索引类型： string和number，但是其实当时用number作为索引的时候，JavaScript会把其转为string来去索引对象

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length是number类型
  name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
}

实现接口

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 Person {
  age: number,
  name: string
}

interface Boy extends Person {
  hasBasketball: boolean
}

let boy = <Boy>{}
boy.age = 25
boy.hasBasketball = false
boy.name = 'chris byrant'

接口混合类型

接口可以同时给对象和函数使用

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

接口继承类

接口继承类的时候，就好像接口声明了所有类中的成员，接口会继承类的private和protected成员，这种情况下，接口只能被这个类或者其子类所实现。

class Control {
  private state: any
}
interface SelectableControl extends Control {
  select(): void
}

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

class Image implements SelectableControl {
  select () {}
}
// Class 'Image' incorrectly implements interface 'SelectableControl'.
//  Property 'state' is missing in type 'Image' but required in type 'SelectableControl'.ts(2420)
//  demo1.ts(149, 11): 'state' is declared here.