来源：小满TypeScript基础教程全集（完结）

JS中有很多内置对象，它们可以直接在TS中当作被定义好了的类型

ECMAScript

ES内置对象实例的类型名和构造器名一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let b: Boolean = new Boolean(1)
console.log(b)
let n: Number = new Number(true)
console.log(n)
let s: String = new String('yajue')
console.log(s)
let d: Date = new Date()
console.log(d)
let r: RegExp = /^1/
console.log(r)
let e: Error = new Error("omg")
console.log(e)
let xhr: XMLHttpRequest = new XMLHttpRequest()
console.log(xhr)

DOM

DOM节点的类型名通常为HTML[某某某]Element，节点集的类型为NodeList或者NodeListOf<[节点类型]>

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 div:HTMLDivElement = document.querySelector("div")
let input:HTMLInputElement = document.querySelector("input")
let p:HTMLParagraphElement = document.querySelector("p")

// 节点集
let divs:NodeList = document.querySelectorAll("div")
let nodes:NodeListOf<HTMLInputElement|HTMLDivElement> = document.querySelectorAll(".omg")

// 有时需要加入类型断言，因为节点存在读不到的可能，读不到会返回null
let div2:HTMLDivElement = document.querySelector('div') as HTMLDivElement
    
// //dom元素的映射表
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "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;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "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;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "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": HTMLTableCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

BOM

和ES内置类型的规则差不多

1
2
3
4
5
let local:Storage = localStorage
let lo:Location = location
// Promise是泛型形式
let promise:Promise<number> = new Promise(r=>r(123))
let cookie:string = document.cookie

代码雨案例

效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./index.js"></script>
</body>
</html>
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
// 获取画布
let canvas:HTMLCanvasElement = document.querySelector("canvas")
// 获取画笔
let ctx = canvas.getContext("2d")
// 设置画布宽高
canvas.width = screen.availWidth    // 可视区的宽度
canvas.height = screen.availHeight  // 可视区的高度

// 代码雨中的文字
let str:string[] = "01".split("")
// 用数组维护代码雨的高度
// 每列宽10px，所以总共有canvas.withd/10列，把数组先填充0
let arr = 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"
  arr.forEach((item,index) => {
    // 在str中随机选取某个字，绘制到canvas上
    ctx.fillText(str[Math.floor(Math.random()*str.length)],index*10,item+10)
    // 如果超出canvas的高度，就重新走一列，否则接着向下走
    // 再给一个随机数值，让文字有概率不落在底端也重新走，从而出现凌乱的效果
    arr[index] = (item>canvas.height || item>10000*Math.random())?0:item+10
  })
  // 不用清空画布，因为要做出渐变的效果
}

setInterval(rain,40)