当前位置：首页 > news >正文

8.ts_内置对象代码雨

news 2026/3/27 3:21:36

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

1. ECMAScript 的内置对象: Number Date RegExp Error XMLHttpRequest

letnum:Number=newNumber(1)letdate:Date=newDate()letreg:RegExp=newRegExp(/\w/)leterr:Error=newError('错了')letxhr:XMLHttpRequest=newXMLHttpRequest()

2. DOM 和 BOM 的内置对象：Document、HTMLElement、Event、NodeList 等

2.1. DOM内置对象：Document、HTMLElement、Event、NodeList

// 2. dom querySelector querySelectorAll// 2.1 querySelector// 2.1.1. HTML(元素名称)Element HTMLElement(毫无特殊的一些标签) Elementletdiv:HTMLDivElement=document.querySelector('div')letinput:HTMLInputElement=document.querySelector('input')letcanvas:HTMLCanvasElement=document.querySelector('canvas')letsection:HTMLElement=document.querySelector('section')letheader:HTMLElement=document.querySelector('header')letfooter=document.querySelector('footer')asElement// 直接断言成Element也是可以的console.log(div,input,canvas,section,header,footer)// 2.2. querySelectorAllletdivList:NodeList=document.querySelectorAll('div footer ')// document.querySelectorAll('div')元素是动态的，使用NodeListOf<类型1 | 类型2 | ...>letdivList:NodeListOf<HTMLDivElement|HTMLElement>=document.querySelectorAll('div')// divList.forEachconsole.log(divList)//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;}

2.2. BOM 的内置对象：promise localStorage location cookie

// 3. bom promise localStorage location cookieletlocal:Storage=localStorageletlo:Location=locationletpromise:Promise<number>=newPromise((r)=>r(123))letpromise1:Promise<string>=newPromise((r)=>r('小满'))letcookie:string=document.cookie console.log(cookie)promise.then(res=>{// res: 推断出来是number类型了// res.toFixed number类型的方法console.log(res)})local.setItem('name','小满')

3. 案例: 代码雨

3.1. tsc -w ：实时监听并自动重新编译
3.2. index.ts的代码：

// 解决canvas报错// let canvas:HTMLCanvasElement | null = document.querySelector('canvas')// if(canvas) {// let ctx = canvas.getContext('2d')// if(ctx) {// canvas.width = screen.availWidth// canvas.height = screen.availHeight// }// }letcanvas:HTMLCanvasElement=document.querySelector('canvas')asHTMLCanvasElementletctx=canvas.getContext('2d')asCanvasRenderingContext2D canvas.width=window.innerWidth canvas.height=window.innerHeightletstr:string[]='XMZSWZS010101'.split('')letArr=Array(Math.ceil(canvas.width/10)).fill(0)console.log(Arr)constrain=()=>{ctx.fillStyle='rgba(0,0,0,0.05)'ctx?.fillRect(0,0,canvas.width,canvas.height)ctx.fillStyle='#0f0'Arr.forEach((item,index)=>{constchar=str[Math.floor(Math.random()*str.length)]||'';// 添加默认值防止undefinedctx.fillText(char,index*10,item+10)Arr[index]=item>canvas.height||item>Math.random()*10000?0:item+10})}setInterval(rain,40)

3.2. index.html的代码：引入编译后的index.js代码

编译后的js代码：

// 1. ecma Number Date RegExp Error XMLHttpRequest// 2. dom querySelector querySelectorAll// 3. bom promise localStorage location cookie// 4. 案例: 代码雨// 1. ecma Number Date RegExp Error XMLHttpRequest// let num:Number = new Number(1)// let date:Date = new Date()// let reg:RegExp = new RegExp(/\w/)// let err:Error = new Error('错了')// let xhr:XMLHttpRequest = new XMLHttpRequest()// console.log(num, date, reg, err, xhr)// 2. dom querySelector querySelectorAll// 2.1 querySelector// 2.1.1. HTML(元素名称)Element HTMLElement(毫无特殊的一些标签) Element// let div:HTMLDivElement = document.querySelector('div')// let input:HTMLInputElement = document.querySelector('input')// let canvas:HTMLCanvasElement = document.querySelector('canvas')// let section:HTMLElement = document.querySelector('section')// let header:HTMLElement = document.querySelector('header')// let footer = document.querySelector('footer') as Element // 直接断言成Element也是可以的// console.log(div, input, canvas, section, header, footer)// 2.2. querySelectorAll// let divList:NodeList = document.querySelectorAll('div footer ')// // document.querySelectorAll('div')元素是动态的，使用NodeListOf<类型1 | 类型2 | ...>// let divList:NodeListOf<HTMLDivElement | HTMLElement> = document.querySelectorAll('div')// // divList.forEach// console.log(divList)// 3. bom promise localStorage location cookie// let local:Storage = localStorage// let lo:Location = location// let promise:Promise<number> = new Promise((r) => r(123))// let promise1:Promise<string> = new Promise((r) => r('小满'))// let cookie:string = document.cookie// console.log(cookie)// promise.then(res => {// // res: 推断出来是number类型了// // res.toFixed number类型的方法// console.log(res)// })// local.setItem('name', '小满')// 4. 案例: 代码雨// 解决canvas报错// let canvas:HTMLCanvasElement | null = document.querySelector('canvas')// if(canvas) {// let ctx = canvas.getContext('2d')// if(ctx) {// canvas.width = screen.availWidth// canvas.height = screen.availHeight// }// }letcanvas=document.querySelector('canvas');letctx=canvas.getContext('2d');canvas.width=window.innerWidth;canvas.height=window.innerHeight;letstr='XMZSWZS010101'.split('');letArr=Array(Math.ceil(canvas.width/10)).fill(0);console.log(Arr);constrain=()=>{ctx.fillStyle='rgba(0,0,0,0.05)';ctx===null||ctx===void0?void0:ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#0f0';Arr.forEach((item,index)=>{constchar=str[Math.floor(Math.random()*str.length)]||'';// 添加默认值防止undefinedctx.fillText(char,index*10,item+10);Arr[index]=item>canvas.height||item>Math.random()*10000?0:item+10;});};setInterval(rain,40);export{};//# sourceMappingURL=index.js.map

index.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;overflow:hidden;}</style></head><body><canvasid="canvas"></canvas><scripttype="module"src="./index.js"></script></body></html>