TS接口

// 接口是一种规范的定义。
// 1.属性类接口
// 对方法传入参数进行约束
interface FullName {
    firstName: string
    secondName: string
    // 可选参数
    thirdName?: string
    fourthName?: string
}
function printName(name: FullName) {
    console.log('printName' + name.firstName + name.secondName)
}
printName({
    firstName: 'zeng',
    secondName: 'jing',
    thirdName: 'hui',
})

// 2.函数类似接口
// 对方法传入参数,以及返回值进行约束
interface encrypt {
    (key: string, value: string): string
}

let md5: encrypt = function (key: string, value: string): string {
    console.log(key + value)
    return key + value
}
md5('name', 'zzzz')

// 3.可索引接口 (不常用)
// 建议创建的时候,直接约束,如
// let arr1: number[] = [1, 2, 3]
// let arr2: string[] = ['1', '2', '3']
// let arr3: Array<number> = [88]
interface UserArr {
    [index: number]: string
}
let arr: UserArr = ['1', '2']
console.log(arr)

// 4.类类型接口 对类的约束
interface Animal {
    name: string
    eat(str: string): void
}
// 实现
class Dog2 implements Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(this.name + '吃粮食')
    }
}
let d = new Dog2('xiaohei')
d.eat()

// 5.接口拓展
interface Animal36 {
    eat1(): void
}
interface Person36 extends Animal36 {
    work1(): void
}
class Programmer {
    public name: string
    constructor(name: string) {
        this.name = name
    }
    coding(code: string) {
        console.log(this.name + 'coding' + code)
    }
}
// 继承又实现
class Web36 extends Programmer implements Person36 {
    // public name: string
    constructor(name: string) {
        // this.name=name
        super(name)
    }
    eat1() {
        console.log('eat1eat1eat1eat1')
    }
    work1(): void {
        console.log('work1work1work1work1')
    }
}
const ww = new Web36('xiaolei')
ww.work1()
ww.eat1()
ww.coding('jsjs')

 

posted on 2022-03-27 15:48  sss大辉  阅读(103)  评论(0编辑  收藏  举报

导航