前言 继续上级第一章的学习
类型断言 | 联合类型 | 交叉类型 联合类型 1 2 3 4 5 6 7 8 9 let myPhone: number | string = '010-820' let myPhone: number | string = true const fn = (something:number | boolean ):boolean => { return !!something }
交叉类型 多种类型的集合,联合对象将具有所联合类型的所有成员
1 2 3 4 5 6 7 8 9 10 11 12 13 interface People { age : number , height: number } interface Man{ sex : string } const haleFn = (man: People & Man ) => { console .log(man.age) console .log(man.height) console .log(man.sex) } haleFn({age : 18 ,height : 180 ,sex : 'male' });
类型断言
语法法:[值] as
[类型]或<类型>
[值]: value as string
or<string>value
1 2 3 4 5 6 7 8 9 10 11 interface A { run : string } interface B { build : string } const fn = (type : A | B): string => { return (type as A).run }
需要注意的是,类型断言只能够 「欺骗」 TypeScript 编译器,无法避免运行时的错误,反而滥用类型断言可能会导致运行时错误:
加餐
内置对象 ECMAScript 的内置对象 Boolean
、Number
、String
、RegExp
、Date
、Error
1 2 3 4 5 6 let b: Boolean = new Boolean (1 )let n: Number = new Number (true )let s: String = new String ('' )let d: Date = new Date ()let r: RegExp =/\[bc\]at/i ; let e: Error = new Error ("error!" )
加餐
Promise
1 2 3 4 5 6 7 8 9 function promise ( ):Promise <number > { return new Promise <number >((resolve,reject )=> { resolve(1 ) }) } promise().then(res => { console .log(res) })
DOM 和 BOM 的内置对象 Document
、HTMLElement
、Event
、NodeList
等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 let body: HTMLElement = document .body;let allDiv: NodeList = document .querySelectorAll('div' );let div:HTMLElement = document .querySelector('div' ) as HTMLDivElementdocument .addEventListener('click' , function (e: MouseEvent ) {});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; }
加餐
代码雨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let canvas = document .querySelector('#canvas' ) as HTMLCanvasElementlet ctx = canvas.getContext('2d' ) as CanvasRenderingContext2Dcanvas.height = screen.availHeight; canvas.width = screen.availWidth; let randomStr: string [] = 'XMZSHALEYZJXMFCLDD0011HS' .split('' )let byteArr = Array (Math .ceil(canvas.width / 10 )).fill(0 )const rain = () => { ctx.fillStyle = 'rgba(0,0,0,0.05)' ctx.fillRect(0 , 0 , canvas.width, canvas.height,) ctx.fillStyle = "#0f0" ; byteArr.forEach((item, index ) => { ctx.fillText(randomStr[Math .floor(Math .random() * randomStr.length)], index * 10 , item + 10 ); byteArr[index] = item > canvas.height || item > (10000 * Math .random()) ? 0 : item + 10 ; }) } setInterval (rain, 40 )