第八章TypeScript class类

重点

implements 约束class类的

readonly 只能给属性用，只能读取

private 只能在内部使用

protected 给子类和内部去使用

public 哪里都能使用

super

父类的 prototype.constructor.call

static

可以给方法也可以给属性是一个静态方法他的this指向的是 static

javascript 复制代码

// 1.class 的基本用法 继承 和 类型约束 implements
// 2.class 的修饰符 readonly private public protected
// 3. super 原理
// 4.静态方法 static
// 5. get set

// 重点
// implements 约束class类的
// readonly 只能给属性用，只能读取
// private 只能在内部使用
// protected 给子类和内部去使用
// public 哪里都能使用
// super
// 父类的 prototype.constructor.call
// static
// 可以给方法也可以给属性是一个静态方法
// 他的this指向的是 static


interface Options {
    el: string | HTMLElement
}

interface VueClas {
    options: Options

    init(): void
}

interface Vnode {
    tag: string // div section header
    text?: string//123
    children?: VNode[]
}

class Dom {
    // 创建节点的方法
    private createElement(el: string) {
        return document.createElement(el)
    }

//     填充文本的方法
    private setText(el: HTMLElement, text: string | null) {
        el.textContent = text
    }

//     渲染函数
    protected render(data: Vnode) {
        let root = this.createElement(data.tag)
        if (data.children && Array.isArray(data.children)) {
            data.children.forEach((item) => {
                let child = this.render(item)
                root.appendChild(child)
            })
        } else {
            this.setText(root, data.text)
        }

        return root
    }
}


class Vue extends Dom implements VueClas {
    readonly options: Options

    constructor(options: Options) {
        super()
        this.options = options
        this.init()
    }

    static xx() {

    }

    static version() {
        return '1.0.0'
    }

    init(): void {
        let data: Vnode = {
            tag: "div",
            children: [
                {
                    tag: "section",
                    text: "我是子节点1"
                },
                {
                    tag: "section",
                    text: "我是子节点2"
                },
                {
                    tag: "section",
                    text: "我是子节点3"
                }
            ]
        }
        let app = typeof this.options.el == 'string' ? document.querySelector(this.options.el) : this.options.el
        app.appendChild(this.render(data))
    }
}

new Vue({
    el: "#app"
})


// set get
class Ref {
    _value: any

    constructor(value: any) {
        this._value = value
    }

    // 这个地方的value和上面的value的不能重复
    get value() {
        return this._value + 'hm'
    }

    set value(newValue) {
        this._value = newValue + '鹤鸣'
    }
}


const ref = new Ref('鹤鸣')
console.log(ref.value) // 输出结果 鹤鸣hm

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./index9.js"></script>
</body>
</html>