Interface 接口

1. 基础定义

interface IValue {
    label: string
    color?: string // ? 表示可选属性
    readonly value: string // 只读属性
    
}

const obj: IValue = {
    label: 'name'
}

2. 额外的属性检查

interface IValue {
    label: string
    color?: string
    readonly value: string
}
# 可以使用类型断言 解决 不完全匹配的接口
const obj: IValue = {label: 'tom', age: 20} as IValue
# 最好的解决办法
interface IValue {
    label: string
    color?: string
    readonly value: string
    [propName: string]: any # 通配
}

3. 函数类型

interface SearchFunc {
    (source:string, subString: string): boolean
}
const Search: SearchFunc = (source: string, subString: string): boolean => {
    ...
    return 10
}
// 参数的名字不必与接口里的名字相匹配， 只要位置对应上即可
const Search: SearchFunc = (sou: string, sub: string): boolean => {
    ...
    return 10
}

4. 可索引的类型

# TypeScript支持两种索引签名：字符串和数字
interface StringArray {
    [index: number]: string
}
let list: StringArray = ['Bob', 'Tom']

class Animal {
    name: string
}
class Dog extends Animal {
    breed: string
}
// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal
    [x: string]: Dog
}

5. 类类型

1. 实现接口

   # TypeScript能够用它来明确的强制一个类去符合某种契约
   interface ClockInterface {
    currentTime: Date
   }
   class Clock implements ClockInterface {
    currentTime: Date
    constructor(h:number, m:number) { ... }
   }
    
   # 也可以在接口中描述一个方法，在类里实现它
   interface ClockInterface {
       currentTime: Date
       setTime(d: Date)
   }
   
   class Clock implements ClockInterface {
       currentTime: Date
       setTime(d: Date) {
           this.currentTime = d
       }
       constructor(h: number, m: number) { }
   }
   

2. 静态部分与实例部分

   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)
   

3. 接口继承接口

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

4. 混合类型

   interface Counter {
       (start: number): string // 箭头函数简写 传入 start 参数 返回 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
   

5. 接口继承类

   # 当接口继承了一个类类型时，它会继承类的成员但不包括其实现
   class Control {
       private state: any // 私有的 state 属性
   }
   
    // 接口 继承 类
   interface SelectableControl extends Control {
       select(): void
       // 继承后 接口 也拥有了 类 的 state 属性
   }
   
   class Button extends Control implements SelectableControl {
       select() { }
       // Button 类 继承 Control 类， Button 也就 拥有了 Control 的 state 属性， 然后再 实现 同时继承了 Control类的接口SelectableControl
       // 就不会因为 Button 没有明确生命 state 属性导致 SelectableControl 的实现失败
   }
   
   class TextBox extends Control {
       select() { }
       // TextBox 继承 Control 的 state 属性
   }
   
   // 错误：“Image”类型缺少“state”属性。
   class Image implements SelectableControl {
       select() { }
       # Image 没有继承 Control， 自己本身又没有 state 属性， 就导致 无法实现 SelectableControl 里的 state 属性
   }