TS--从0开始 （三、接口深入-2）

使用接口描述函数

不使用接口时 无法复用

function fun1(x: number, y: number): number {
    return x + y
}
function fun2(x: number, y: number): number {
    return x + y
}
//无法复用

使用后

interface Func {
    (x: number, y: number): number
}

// 使用接口描述函数Func可复用

let fun1: Func = function (x: number, y: number): number {
    return x + y
}
let fun2: Func = function (x: number, y: number): number {
    return x + y
}

示例

interface Func {
    (el: MouseEvent): void
}

// MouseEvent  鼠标事件


let temple = function (a: HTMLElement, b: string, c: Func): number {
    return 1
}

let ele = document.getElementsByTagName('div')[0]

temple(ele, 'click', (el) => { })

接口合并

当两个接口重名时 不会覆盖 而是合并

interface Box {
    num1: number,
    num2: number
}

interface Box {
    str1: string
}

let obj: Box = {
    num1: 1,
    num2: 2,
    str1: '学习如逆水行舟，不进则退'
}

• 当为非函数类型时，要求属性值同名的必须类型相同

interface Box {
    num1: number,
    num2: number,
    name: string
}

interface Box {
    str1: string
    name: string
}

let obj: Box = {
    num1: 1,
    num2: 2,
    str1: '学习如逆水行舟，不进则退',
    name: 'meimei'
}

• 当为函数时则采用重载

interface Box {
    num1: number,
    num2: number,
    fun(x: number): void
}

interface Box {
    str1: string
    fun(x: number): string
}

let obj: Box = {
    num1: 1,
    num2: 2,
    str1: '学习如逆水行舟，不进则退',
    fun: function (x: any): any {

    }
}