TypeScript基础笔记——内置对象(TS -- 7)

简介: 内置对象(TS -- 7)

ECMAScript的内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript中当做定义好了的类型。

Boolean、Number、stringRegExpDateError

constregexp:Regexp=/\w\d\s///声明正则

constdate:Date=newDate()//对象类型

//const date:Date = new Date().getTime()  number类型

consterror:Error('错误')

总结

letb: Boolean=newBoolean(1)

console.log(b)

letn: Number=newNumber(true)

console.log(n)

lets: String=newString('小满今天穿白丝')

console.log(s)

letd: Date=newDate()

console.log(d)

letr: RegExp=/^1/

console.log(r)

lete: Error=newError("error!")

console.log(e)

DOM 和 BOM 的内置对象

DocumentHTMLElementEventNodeList

constlist:NodeList=document.querySelectorAll('#list li')

console.log(list)

//NodeList 实例对象是一个类似数组的对象,它的成员是节点对象。Node.childNodes、document.querySelectorAll () 返回的都是 NodeList 实例对象。 [1]  NodeList 对象代表一个有序的节点列表。

constbody:HTMLElement=document.body

console.log(body)

constdiv:HTMLDivElement=document.querySelector('div')

console.log(div)

document.body.addEventListener('click',(e:MouseEvent)=>{

   console.log(e)

})

//promise

functionpromise():Promise<number>{//Promise是类型,number是泛型

   returnnewPromise<number>(resolve,rejuct)=>{

       resolve(1)//如果不进行断言的话会报错

   }

}

promise().then(res=>{

   console.log(res)//返回1,这里会提示你res应该输入number类型

})

letbody: HTMLElement=document.body;

letallDiv: NodeList=document.querySelectorAll('div');

//读取div 这种需要类型断言 或者加个判断应为读不到返回null

letdiv:HTMLElement=document.querySelector('div') asHTMLDivElement

document.addEventListener('click', function (e: MouseEvent) {

   

});

//dom元素的映射表

interfaceHTMLElementTagNameMap {

   "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;

}


目录
相关文章
|
6月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript数组转置
[小笔记]TypeScript/JavaScript数组转置
73 0
|
6月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
67 0
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
154 2
|
1月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
1月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
52 0
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
28 0
|
2月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
34 1
|
3月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
32 0
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
30 0
|
6月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
73 4