typescript 接口

青旅半醒 2021-11-27 05:28 448阅读 0赞

/**
     类型检查器会查看printLabel的调用。
     printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。
     需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配
     */
    
    // function printLabel(labelledObj: { label: string }) {
    //     console.log(labelledObj.label)
    // }
    //
    // let myObj = {size: 10, label: '这个属性必须是个字符串类型'}
    // printLabel(myObj)
    
    /**
     * 使用接口描述
     */
    
    // interface LabelValue {
    //     label: string
    // }
    //
    // function printLabel(labelledObj: LabelValue) {
    //     console.log(labelledObj.label)
    // }
    //
    // let myObj = {size: 10, label: '使用接口来描述'}
    // printLabel(myObj)
    
    /**
     * LabelledValue接口就好比一个名字，用来描述上面例子里的要求。
     * 它代表了有一个 label属性且类型为string的对象。
     * 需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。
     * 只要传入的对象满足上面提到的必要条件，那么它就是被允许的。
     *  还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。
     */
    
    
    /**
     * 可选属性
     接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。
     */
    
    interface SquareConfig {
        color?: string,
        width?: number
    }
    
    /**
     * 带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。
     */
    function createSquare(config: SquareConfig): { color: string, area: number } {
        let newSquare = {color: 'blue', area: 100}
        if (config.color) {
            newSquare.color = config.color
        }
        if (config.width) {
            newSquare.area = config.width * config.width
        }
        return newSquare
    }
    
    let mySquare = createSquare({color: 'pink'})
    console.log(mySquare)
    
    
    /**
     * 只读属性
     一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:
     */
    
    interface Point {
        readonly x: number,
        readonly y: number
    }
    
    let p1: Point = {x: 10, y: 5}
    // p1.x = 5  //Cannot assign to 'x' because it is a read-only property.
    console.log(p1)
    
    /**
     * ReadonlyArray<T> 它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：
     */
    let a: number[] = [1, 2, 3]
    let ro: ReadonlyArray<number> = a
    // ro[0] = 5 //err
    /** ro 的内容不能再更改了 就算把整个ReadonlyArray赋值到一个普通数组也是不可以的*/
    /** 但是可以使用类型断言 */
    a = ro as number[]
    console.log(ro, a)
    
    /** readonly vs const
     最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。*/
    
    
    /**
     * 函数类型
     * 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
     */
    interface InterFn {
        (age: number, fullName: string): string
    }
    
    let myFn: InterFn
    /** 函数的参数名不需要与接口里定义的名字相匹配  但要求对应位置上的参数类型是兼容的 因为函数直接赋值给了 SearchFunc类型变量*/
    /** 可以不指定类型 但是对应位置不能指定错误的类型 */
    // myFn = (age: number, fullName: string) => {
    myFn = (age, fullName) => {
        let explain = `年龄：${age}     姓名：${fullName}`
        return explain
    }
    let user_str = myFn(23, 'LWT')
    console.log(user_str)
    
    
    /**
     * 可索引的类型
     * 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。
     * TypeScript支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。
     */
    interface StrArr {
        [index: number]: string
    }
    
    let arrIndex: StrArr = ['LWT', 'WLP']
    let myName: string = arrIndex[0]
    console.log(myName)
    
    
    /**
     * 继承接口
     */
    interface Shape {
        color: string
    }
    
    interface Super extends Shape {
        age: number
    }
    
    let star = <Super>{}
    star.color = 'red'
    star.age = 20
    console.log(star.color)
    console.log(star.age)
    
    /** 一个接口可以继承多个接口，创建出多个接口的合成接口。 */
    interface Car {
        name: string
        width: number
        height: number
    }
    
    interface Price {
        price: number
    }
    
    interface Introduce extends Car, Price {
    
    }
    
    let car = <Introduce>{}
    car.name = '汽车'
    car.width = 1500
    car.height = 300
    car.price = 20000
    console.log(car)
    
    // car.color = 'red' 报错 Property 'color' does not exist on type 'Introduce'.
    
    
    /**
     * 混合类型
     * 一个对象可以同时做为函数和对象使用，并带有额外的属性。
     */
    interface ToDay {
        weather: string
    
        (mood: string): string
    
        funny(): void
    }
    
    function initToDay(): ToDay {
        let day = <ToDay>function (wearther: string) { }
        day.weather = 'sunny day'
        day.funny = function () { }
        return day
    }
    let day = initToDay()
    console.log(day.weather)
    day('sunny day')
    day.funny()