ts Class类

回顾ES6 Class类

class Person {
    constructor (name,age) {
        this.name = name
        this.age = age
    }
    run() {
        
    }
}

ts不能在constructor定义变量的，需要在constructor上面先声明

类型约束implements

interface Options {
    el: string | HTMLElement
}

interface Vnode {
    tag: string | HTMLElement
    text: string | null
    children: Vnode[]
}

interface VueCls {
    options: Options,
    init(): void
}

class Dom {
    createElement(el: string) {
        return document.createElement(el)
    }
    setText(el:HTMLElement, text: string | null) {
        el.textContent = text
    }
    rander(data: Vnode) {
        let root = this.createElement(data.tag)
        if(data.children && Array.isArray(data.children)) {
            data.children.forEach(item => {
                this.rander(item)
            })
        }
        return root
    }
}

class Vue extends Dom implements VueCls {
    options: Optionsfhfn
    constructor(options) {
        this.options = options
        this.init()
    }
    init(): void {
        let data: Vnode = {
            tag: 'div',
            children: [
                {
                    tag: 'span',
                    text: '测试'
                },
                {
                    tag: 'span',
                    text: '测试'
                }
            ]
        }
    }
}

new Vue({
    el: '#App'
})