Typescript Interface 接口

1 关于接口

对于值的类型检查是typescript的核心设计原则，而typescript接口的责任就是命名这些值的类型。
因此，可以说接口是typescript核心设计原则————类型检查的实现方式。

2 接口初探

用一个小demo来看看JavaScript和typescript的特点

function fnPrintObj(obj: Object) {

    console.log(obj)

}

interface IObj {

    key: string

}
function fnPrintObj2(obj: IObj) {

    console.log(obj)

}
fnPrintObj({ key: 'island' })
fnPrintObj2({ key: "island" })
fnPrintObj2({ name: "island" }) // error

在fnPrintObj中，只要是对象类型都可以被打印
在fnPrintObj2中，只有数据结构契合接口IObj的才可以被打印

3 可选属性

然而，实际应用中，我们并不要求函数形参必须具有接口中所有的属性类型。
因此，可选属性是非常必要的。

interface someI{
    name?:string
    age?:Number
    color?:string

}
function fnPrintObj3(obj:someI){

    console.log(obj)

}

fnPrintObj3({name:"island", age:12, color:"red"})
fnPrintObj3({color:"red"})

4 只读属性

有些属性只能在对象刚刚创建的时候修改其值，可用到此特性。
和const不同，const常作为常量使用，作用者是变量
readonly作为属性使用，作用者是对象属性

interface appleI{

    readonly weight : number
    readonly radius ?: number

}
function fnGetApple(obj:appleI){

    return obj

}
let apple = fnGetApple({weight:100, radius:50})
let apple2 : appleI = {weight:100}
// apple.weight = 200 // error
// apple2.weight = 300 // error

let appleList : ReadonlyArray<appleI> = [apple, apple2]
// appleList.push(apple2) error
console.log(appleList)

5 函数类型

接口除了能够描述带有属性的对象类型之外，也可以描述函数类型
定义函数类型时，只需要定义形参列表和返回值即可

interface findI {

    // 形参列表 : 返回值类型
    (source: string, item: string): boolean

}
let myFind: findI
myFind = function (source: string, item: string) {

    return source.search(item) > -1

}
console.log(myFind("heihei", 'ei')) // true

6 指定索引类型

可索引的类型 指定索引值的类型

interface StringArray {

    [index: number]: string;

}

let myArray : StringArray; 
myArray = ["s1", "s2"]
let indexStr : string = myArray[0]
// console.log(indexStr)

7 类和接口

与Java或C#一样，Typescript也能够用它来明确的强制一个类去遵守某种契约
与Java不同的是，Typescript的类实现接口，不存在方法的重载，全部是方法的重写

当一个类实现了一个接口，只有实例部分会被检查，静态部分(比如构造函数)不会被检查

interface ClockInterface{

    currentTime:Date

}
class Clock implements ClockInterface{

    // 只检查实例部分，构造函数属于静态部分，不会被检查
    constructor(h:number, m:number){}
    // 实例部分会被检查

    currentTime:Date

}

8 继承接口

和类一样，接口也可以相互继承。
接口之间的继承使得一个接口可以从另一个接口里复制成员，便于抽离和处理可重用的模块。

interface Eye {

    eyeColor: string

}

interface Nose {

    noseSize: string

}

interface Person extends Eye, Nose {

    height: number
    weight: number

}

class Chinese implements Person {

    constructor(h:number, w:number, c:string, s:string){
        this.height = h
        this.weight = w
        this.eyeColor = c
        this.noseSize = s
    }

    height: number
    weight: number

    eyeColor: string

    noseSize: string

    introduceMe(){
        console.log("我的信息:", this.height, this.weight, this.eyeColor, this.noseSize)
    }

}
let dragon = new Chinese(170, 60, "blue", "middle")
dragon.introduceMe()

let person = <Person>{}
person.eyeColor = 'blue'
person.noseSize = 'big'
person.height = 170
person.weight = 60
// console.log(person) // { color: 'blue', size: 'big', height: 170, weight: 60 }

混合类型

在JS中，函数也是一种特殊类型的对象
因此，在TS接口中，函数和对象的类型都可以被同一个接口作用

interface Counter {

    (start: number): string
    interval: number
    reset(): void

}

// 必须返回一个对象 等价于 let obj : Counter = <Counter>{}
function getCounter(): Counter {

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

}
let counter = getCounter()
counter(10)
counter.reset()
counter.interval = 5.0
console.log(counter) // [Function: counter] { interval: 5, reset: [Function] }

let obj : Counter = <Counter>{

    interval:1000,
    reset:()=>{}

}
console.log(obj) //{ interval: 1000, reset: [Function: reset] }

接口继承类

当接口继承了一个类，它会继承类的成员，但接口中继承过来的成员是仅有定义而没有实现的
需要说明的是，如果一个接口继承了一个拥有private或protected成员的类时，此接口只能有此类的子类所实现

class Control {
    private state: any
    private state2 = 2
    public state3: any
    public state4 = 4
    _toString() {
        console.log("访问到Control类中的私有属性state2:", this.state2)
    }
}

interface SelecetableControl extends Control {
    select(): void;
}

// 一个接口继承了具有私有成员(或受保护成员)的类，那么该接口只能被这个类的子类实现
class SubControl extends Control implements SelecetableControl {
    constructor() {
        super()
        console.log(this.state4)
    }
    select() { }
}
// new SubControl()._toString() // 访问到Control类中的私有属性state2: 2

let obj1: SubControl = <SubControl>{
    state3: 3,
    state4: 666,
    select: () => { },
    _toString: () => { console.log(111) }
}
console.log(obj1)