JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。
ECMAScript 的内置对象
Boolean、Number、string、RegExp、Date、Error
let b: Boolean = new Boolean(1) console.log(b) let n: Number = new Number(true) console.log(n) let s: String = new String('哔哩哔哩关注小满zs') console.log(s) let d: Date = new Date() console.log(d) let r: RegExp = /^1/ console.log(r) let e: Error = new Error("error!") console.log(e)
DOM 和 BOM 的内置对象
Document、HTMLElement、Event、NodeList 等
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; }
定义Promise
如果我们不指定返回的类型TS是推断不出来返回的是什么类型
指定返回的类型
函数定义返回promise 语法规则:Promise<T> 类型
function promise():Promise<number>{ return new Promise<number>((resolve,reject)=>{ resolve(1) }) } promise().then(res=>{ console.log(res) })
当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了
而他们的定义文件，则在 TypeScript 核心库的定义文件中
代码雨案例
let canvas = document.querySelector('#canvas') as HTMLCanvasElement let ctx = canvas.getContext('2d') as CanvasRenderingContext2D canvas.height = screen.availHeight; //可视区域的高度 canvas.width = screen.availWidth; //可视区域的宽度 let str: string[] = 'XMZSWSSBXMZSWSSBXMZSWSSBXMZSWSSBXMZSWSSB'.split('') let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) //获取宽度例如1920 / 10 192 console.log(Arr); const rain = () => { ctx.fillStyle = 'rgba(0,0,0,0.05)'//填充背景颜色 ctx.fillRect(0, 0, canvas.width, canvas.height)//背景 ctx.fillStyle = "#0f0"; //文字颜色 Arr.forEach((item, index) => { ctx.fillText(str[ Math.floor(Math.random() * str.length) ], index * 10, item + 10) Arr[index] = item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10; //添加随机数让字符随机出现不至于那么平整 }) console.log(Arr); } setInterval(rain, 40)
