TS(二)内置对象与class类

2023-06-20,,

内置对象

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一样,抽象类中可以含有抽象方法也能含有实现方法,抽象方法必须由子类实现

抽象类不能实例化

TS(二)内置对象与class类的相关教程结束。

《TS(二)内置对象与class类.doc》

下载本文的Word格式文档,以方便收藏与打印。