三、typescript 接口定义/继承/类

三，接口

interface 定义接口

   function printObj(labelObj:{label:string}){
     console.log(labelObj.label)
    }
    let newObj = {size:10,label:'label obj'}
    printObj(newObj)

必须给label属性类型为string

   interface labelType{
        label:string
    }
    function printObj(labelObj:labelType){
        console.log(labelObj.label)
    }
    let myObj = {size:100,label:'label'}
    printObj(myObj)

可选属性  ?: 

 interface myConfig{
        color?:string,
        width?:number
    }

   function createConfig(config:myConfig):{color:string;width:number}{
        let newConfig = {color:'pink',width:100}
        if(config.color){
            newConfig.color = config.color 
        }
        if(config.width){
            newConfig.width = config.width
        }
        return newConfig
    }
    let configV = createConfig({color:'black'})
    console.log('config',configV)

只读属性 readonly

  interface Point {
            readonly x: number;
            readonly y: number
        }
    let p1: Point = { x: 10, y: 20 }
    p1.x = 5 //error

额外的属性检查

  interface Config{
        color?:string;
        width?:number;
        [propName:string]:any;   //额外属性
    }
    

函数类型

   interface SearchFun {
        (value: string, sub: string): boolean
    }
    let mySearch: SearchFun;
    mySearch = function (value: string, sub: string): boolean {
        let res = value.search(sub)
        return res > -1
    }
    console.log('mySearch', mySearch)

可索引的类型 签名和索引赋值类型需要相同

   interface StringArr {
        [index: number]: string
    }
    let myArr: StringArr = ['aaa', 'bbb']
    let myStr: string = myArr[0]    //number   string
    console.log('mystr', myStr)

类类型

interface ClockFace{
    curTime:Date;
    setTime(d:Date)
}
class Clock implements ClockFace{
    curTime:Date;
    setTime(d:Date){
        this.curTime = d
    }
    constructor(h:number){
    }
}
console.log('Clock',Clock)

静态部分和实例

  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 AClock implements ClockInterface {
        constructor(hour: number, minute: number) {
            console.log(hour, '---', minute)
        }
        tick() {
            console.log('aClock')
        }
    }
    class BClock implements ClockInterface {
        constructor(h: number, m: number) {
            console.log(h, '====', m)
        }
        tick() {
            console.log('bclock')
        }
    }
    let aCreate = createClock(AClock, 10, 11)
    let bCreate = createClock(BClock, 22, 11)
    console.log('aCreate:', aCreate)
    console.log('bCreate', bCreate)

继承接口

interface Shape1{
    color:string
}
interface Shape2{
    width:number
}
//可一次继承多个接口
interface ChildShape extends Shape1,Shape2{
    height:number
}
let myShape = <ChildShape>{}
myShape.color='pink'
myShape.width=100
myShape.height=100
console.log('myShape',myShape)

混合类型

interface Counter{
    (start:number):string;
    interval:number;
    reset():void;
    (propName:String):any
}
function getCounter():Counter{
    let counter = <Counter>function(start:number){}
    counter.interval=123
    counter.reset=function(){}
    return counter
}
let cc = getCounter()
cc(10)
cc.reset()
cc.interval=2
console.log('cc:',cc)

接口继承类

class Control{
    private state:any
}
interface SelectControl extends Control{
    select():void
}
class Button extends Control implements SelectControl{
    select(){}
}
class TextBox extends Control{
    select(){}
}
//error 缺少state属性
class Image implements SelectControl{
    select(){};

}