TypeScript基本知识（2）

Class

• implements类型约束
• private 只能在自己内部使用，字类也不能调用，也不允许在外部调用 let dom = new Dom() dom.render 也不行
• protected 给字类和内部去使用，外部不能用
• 静态方法 直接类调用Vue.version() 只能是static方法调用static方法

interface Options { 
    el: string | HTMLElement
}

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

interface Vnode { 
    tag: string
    text?: string
    children?:Vnode[]
}

class Dom { 
    createElement(el: string) { 
        return document.createElement(el )
    }
    setText(el: HTMLElement, text: string | null) { 
        el.textContent = text
    }
    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 VueCls { 
    options: Options
    constructor(options: Options) { 
        super() // 父类的prototype.constructor.call
        this.options = options
        this.init()
    }
    static version() { 
        return '1.1'
    }
    init(): void { 
        let data: Vnode = {
            tag: 'div',
            children: [{
                tag: 'section',
                text:'我是子节点1'
            }]
        }
        let app = typeof this.options.el == 'string' ? document.querySelector(this.options.el) : this.options.el
        app.appendChild(this.render(data)) 
    }
}

new Vue({
    el: '#app',
})
Vue.version()

class Ref { 
    _value: any
    constructor(value: any) { 
        this._value = value
    }
    get value() { 
        return this._value + 'vvv'
    }
    set value(newVal) { 
        this._value = newVal + 'hhh'
        console.log(this._value)
    }
}

const ref = new Ref('why')
console.log(ref.value)
ref.value = 'mmm'

基类、抽象类

abstract 所定义的方法 都只能描述不能进行实现
抽象类不能实例化 new Person()报错

abstract class Person { 
    name: string
    constructor(name: string) { 
        this.name = name
    }
    getName(name: string) { 
        return name
    }
    // 只能描述
    abstract init(name: string) : void 
}

class Student extends Person { 
    constructor(name: string) { 
        super(name)
    }
    init() { 

    }
    setName(name: string) { 
        this.name = name
    }
}

元组

元组 就是数组的变种
元组是固定数量的不同类型的元素的集合

let arr2:[number,string] = [1, 'aa']
let excel: [string, string, number][] = [
    ['aa', 'bb', 18],
    ['aa1','bb1',18]
]

枚举

// 枚举
// 枚举
enum Types { 
    Red,
    Green,
    Blue
}
console.log(Types.Red)  // 0
// 增长枚举
enum Types1 { 
    Red = 1,
    Green,
    Blue
}
console.log(Types1.Green) // 2

enum Color { 
    aa,
    no = 'no',
    yes = '1'
}
console.log(Color.aa) // 0
console.log(Color.no) // no

interface aa { 
    red: Color.yes
}

let objo: aa = { 
    red: Color.yes
}

enum Types2 { 
    success
}
let success: number = Types2.success
let key = Types2[success]
console.log(`value-${success}`,`key---${key}`) // value-0 key---success

类型别名

type s = string
type s1 = string | number
let str: s = 'aa'

// extends 包含的意思 左边的值会作为右边的子类型
// unknow any
// Object
// Number String Boolean
// number string boolean
// never
type num = 1 extends number ? 1 : 0

Symbol

let a1: symbol = Symbol(1)
let a2: symbol = Symbol(2)
console.log(a1 === a2) // false
// for Symbol for全局symbol有没有注册过这个key 如果有直接拿来用 没有的话他就去创建一个
console.log(Symbol.for('xiaoman') === Symbol.for('xiaoman')) // true

let obj = {
    name: 1,
    [a1]: 111,
    [a2]: 222,
}
console.log(obj) // {name: 1, [Symbol(1)]: 111, [Symbol(2)]: 222}

//只能读取到name
for (let key in obj) { 
    console.log(key)
}
// 只能取到symbol name丢了
console.log(Object.getOwnPropertySymbols(obj))

// 这个可以取到全部
console.log(Reflect.ownKeys(obj))