TypeScript 接口

1. 接口定义

// 定义一个接口
// 其实类似于 Go 中的 struct：描述一个 object 应该有的 property 和 method
// 与 Java、C 中的 interface 并不是同一个概念
interface Employee {
    readonly name: string           // readonly
    salary: number
    bonus?: number                  // optional
}

// 不可少字段
// 不可多字段
// bonus 为可选
const emp1:Employee = {
    name: 'hedon',
    salary: 2000
}

const emp2: Employee = {
    name: 'hedon',
    salary: 2000,
    bonus: 1000,
}

// let emp3: Employee
// console.log(emp3)   // 不可，还没分配空间
// emp3.name = '111'   // 不可，还没分配控制

2. 可选字段串联

• ?: 可选
• !: 确保有，后果自负

interface Employee {
    name?: {
        first: string
        last: string
    }  
    salary: number
    bonus?: number                 
}


function hasBadName(e: Employee){
    return e.name?.first.startsWith('AAA')
}

const emp1: Employee = {
    name: {
        first: 'hedon',
        last: 'wang'
    },
    salary: 2222,
    bonus: 2000
}

console.log(hasBadName(emp1)) // false


const emp2: Employee = {
    name: {
        first: 'AAAhedon',
        last: 'wang'
    },
    salary: 2222,
    bonus: 2000
}

console.log(hasBadName(emp2)) // true

const emp3: Employee = {
    salary: 2222,
    bonus: 2000
}

console.log(hasBadName(emp3)) // undefined

3. 接口扩展

• extends

interface HasName {
    name?: {
        first: string
        last: string
    }
}

interface Employee extends HasName{
    salary: number
    bonus?: number                  
}

4. 类型的并

• 实际上，默认只能出现共有属性

interface WxButton {
    visible: boolean
    enable: boolean
    onClick(): void
}

interface WxImage {
    visible: boolean
    src: string
    width: number
    height: number
}

// union of type
function hideElement(e: WxButton | WxImage ) {
    // 只能出现共有的属性
    e.visible
}

5. 类型断言

interface WxButton {
    visible: boolean
    enable: boolean
    onClick(): void
}

interface WxImage {
    visible: boolean
    src: string
    width: number
    height: number
}

function processElement(e: WxButton | WxImage) {
    // 目标：
    // if e is WxButton
    //      e.onClick
    // else
    //      console.log(e.src)

    if ((e as any).onClick) {
        // 类型断言
        const btn = e as WxButton
        btn.onClick()
    } else {
        const img  = e as WxImage
        console.log(img.src)
    }
}