TS（二）内置对象与class类

内置对象

ECMA内置对象

Boolean、Number、String、RegExp、Date、Error

const regexp:RegExp = /\w\d\s
const number:Number = 1
const string:String = "123"
    ...

返回的都是一个对象，类似java的包装类

DOM和BOM的内置对象

Document、HtmlElement、Event、NodeList等

const list:NodeList = document.querySelectorAll('#list li')
const body:HTMLElement = document.body
const div:HTMLDivElement = document.querySelector('div')
document.addEventListener('click', (e:MouseEvent) => {
    console.log(e)
})

常见html元素对应的内置对象

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

Promise

function promise():Promise<number>{
    // @ts-ignore
    return new Promise<number>((resolve,reject)=>{
        resolve(1)
    })
}
promise().then(res => {
    console.log(res)
})

class类

跟java不能说一模一样。。

class Person {
    private name:string
    private age:number
    private sex:boolean
 
    constructor(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
    }
 
    setName(name:string) {
        this.name = name
    }
    setAge(age:number) {
        this.age = age
    }
    setSex(sex:boolean) {
        this.sex = sex
    }
}
 
let p = new Person('1', 1, true)
 

三种权限修饰符：public private protected

static静态属性、函数

implements实现接口

interface Runnable {
    run(type:boolean):boolean
    a: number
}
class Person implements Runnable{
 
    private name:string
    private age:number
    private sex:boolean
 
    constructor(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
    }
 
    a: number
 
    setName(name:string) {
        this.name = name
    }
    setAge(age:number) {
        this.age = age
    }
    setSex(sex:boolean) {
        this.sex = sex
    }
 
    run(type: boolean): boolean {
        return false;
    }
}

抽象类

abstract class A {
    private readonly name: string
    protected age: number
    protected constructor(name:string, age:number) {
        this.name = name
        this.age = age
    }
    getName():string {
        return this.name
    }
    abstract getAge(): number
}
 
class B extends A {
    constructor(name:string, age:number) {
        super(name, age);
    }
    getAge(): number {
        return this.age;
    }
}
 
const b = new B("liu", 123)
console.log(b.getAge())
console.log(b.getName())

和java一样，抽象类中可以含有抽象方法也能含有实现方法，抽象方法必须由子类实现

抽象类不能实例化