TS学习笔记2----内置对象、class类

TS学习笔记（内置对象、class类）

ECMAScript的内置对象

//JavaScript中的很多内置对象，可以直接在TS中使用
let bool:Boolean = new Boolean(1)
let n:Number = new Number(true)
let s:String = new String('123')
let date:Date = new Date()
let regexp:RegExp = /^1/
let e:Error = new Error('错误信息')

DOM和BOM内置对象

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
//读取div 这种需要类型断言 或者加个判断应为读不到返回null
let div:HTMLElement = document.querySelector('div') as HTMLDivElement
document.addEventListener('click', function (e: MouseEvent) {
    
});
//dom元素的映射表
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;
}
//BOM内置对象
document.addEventListener('click', (e: MouseEvent) => {
  console.log(e)
})
//promise
function primise():Promise<number>{
    return new Promise<number>((reslove,reject)=>{
        reslove(4)
    })
}
promise().then(res=>{
    console.log(res) //4
})

class类

//class类
class Tom {
  public name: string //提前声明类型，声明了就需要用到 public,内部外部都能访问，ts修饰符，默认不写就是public
  private age: number //private私有变量，只能在内部访问
  protected sub: boolean //protected在内部跟子类中访问，外部访问不到
  static nb: string
  constructor(name: string, age: number, sub: boolean) {
    this.name = name
    this.age = age //访问到
    this.sub = sub
    //this.nb static静态属性，只能通过类名去访问，不能this
    // this.run() static同样静态函数，也只能通过类名访问
  }
  static run() {
    console.log(this.name)
  }
}
// person.age //访问不到
let person = new Tom('汤姆', 18, false)
person.name = '班花姐姐'
class Banhua extends Tom {
  constructor() {
    super('汤姆', 18, false)
    this.sub = true //子类中可以访问
  }
}
let banhua = new Banhua()
console.log(banhua);
console.log(person);
Tom.nb = 'nb' //static类名访问
Tom.run()

//interface定义类
interface PersonClass {
  get(type: boolean): boolean
}
interface PersonClass2 {
  set(): void,
  asd: string
}
class personClass {
  name: string
  constructor() {
    this.name = 'TOM'
  }
}
//interface 定义类 使用implements关键字，后面跟的interface名字多个用逗号隔开，继承还是extents
class sonClass extends personClass implements PersonClass, PersonClass2 {
  asd: string
  constructor() {
    super()
    this.asd = '123'
  }
  get(type: boolean) {
    return type
  }
  set(): void {

  }
}
let son = new sonClass()
console.log(son);

//抽象类 abstract
abstract class abstractClass {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  abstract getName(): string
}
// new abstractClass() //会报错，抽象类无法被实例化

//定义的抽象方法getName，必须在派生类中实现
class abstractSon extends abstractClass {
  constructor() {
    super('tom')
  }
  getName(): string {
    return this.name
  }
}
let abSon = new abstractSon()
console.log(abSon.getName()); //tom