参考

TypeScript 核心库的定义
https://github.com/Microsoft/TypeScript/tree/main/src/lib
image.png

JS内置对象

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

DOM 和 BOM 的内置对象

DOM 和 BOM 提供的内置对象有：
Document、HTMLElement、Event、NodeList 等。
TypeScript 中会经常用到这些类型：

  1. let body: HTMLElement = document.body; 
  2. let allDiv: NodeList = document.querySelectorAll('div'); 
  3. document.addEventListener('click', function(e: MouseEvent) {   // Do something });

它们的定义文件同样在 TypeScript 核心库的定义文件中。

标签类型定义

HTMLElement举例

https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
image.png

React+TS中使用案例

image.png
image.png
image.png

各种标签对应的类型定义

并不是所有的标签都有对应单独的类型定义，应该是存在额外的属性的标签才会定义，比如input标签，普通的标签则共用HTMLElement类型（先这么理解，待修正），比如section、 b 、html等等。
具体参考：
https://github.com/microsoft/TypeScript/blob/v3.9.5/lib/lib.dom.d.ts#L19224-L19343

  2. interface HTMLElementTagNameMap {
  3.     "a": HTMLAnchorElement;
  4.     "abbr": HTMLElement;
  5.     "address": HTMLElement;
  6.     "applet": HTMLAppletElement;
  7.     "area": HTMLAreaElement;
  8.     "article": HTMLElement;
  9.     "aside": HTMLElement;
  10.     "audio": HTMLAudioElement;
  11.     "b": HTMLElement;
  12.     "base": HTMLBaseElement;
  13.     "basefont": HTMLBaseFontElement;
  14.     "bdi": HTMLElement;
  15.     "bdo": HTMLElement;
  16.     "blockquote": HTMLQuoteElement;
  17.     "body": HTMLBodyElement;
  18.     "br": HTMLBRElement;
  19.     "button": HTMLButtonElement;
  20.     "canvas": HTMLCanvasElement;
  21.     "caption": HTMLTableCaptionElement;
  22.     "cite": HTMLElement;
  23.     "code": HTMLElement;
  24.     "col": HTMLTableColElement;
  25.     "colgroup": HTMLTableColElement;
  26.     "data": HTMLDataElement;
  27.     "datalist": HTMLDataListElement;
  28.     "dd": HTMLElement;
  29.     "del": HTMLModElement;
  30.     "details": HTMLDetailsElement;
  31.     "dfn": HTMLElement;
  32.     "dialog": HTMLDialogElement;
  33.     "dir": HTMLDirectoryElement;
  34.     "div": HTMLDivElement;
  35.     "dl": HTMLDListElement;
  36.     "dt": HTMLElement;
  37.     "em": HTMLElement;
  38.     "embed": HTMLEmbedElement;
  39.     "fieldset": HTMLFieldSetElement;
  40.     "figcaption": HTMLElement;
  41.     "figure": HTMLElement;
  42.     "font": HTMLFontElement;
  43.     "footer": HTMLElement;
  44.     "form": HTMLFormElement;
  45.     "frame": HTMLFrameElement;
  46.     "frameset": HTMLFrameSetElement;
  47.     "h1": HTMLHeadingElement;
  48.     "h2": HTMLHeadingElement;
  49.     "h3": HTMLHeadingElement;
  50.     "h4": HTMLHeadingElement;
  51.     "h5": HTMLHeadingElement;
  52.     "h6": HTMLHeadingElement;
  53.     "head": HTMLHeadElement;
  54.     "header": HTMLElement;
  55.     "hgroup": HTMLElement;
  56.     "hr": HTMLHRElement;
  57.     "html": HTMLHtmlElement;
  58.     "i": HTMLElement;
  59.     "iframe": HTMLIFrameElement;
  60.     "img": HTMLImageElement;
  61.     "input": HTMLInputElement;
  62.     "ins": HTMLModElement;
  63.     "kbd": HTMLElement;
  64.     "label": HTMLLabelElement;
  65.     "legend": HTMLLegendElement;
  66.     "li": HTMLLIElement;
  67.     "link": HTMLLinkElement;
  68.     "main": HTMLElement;
  69.     "map": HTMLMapElement;
  70.     "mark": HTMLElement;
  71.     "marquee": HTMLMarqueeElement;
  72.     "menu": HTMLMenuElement;
  73.     "meta": HTMLMetaElement;
  74.     "meter": HTMLMeterElement;
  75.     "nav": HTMLElement;
  76.     "noscript": HTMLElement;
  77.     "object": HTMLObjectElement;
  78.     "ol": HTMLOListElement;
  79.     "optgroup": HTMLOptGroupElement;
  80.     "option": HTMLOptionElement;
  81.     "output": HTMLOutputElement;
  82.     "p": HTMLParagraphElement;
  83.     "param": HTMLParamElement;
  84.     "picture": HTMLPictureElement;
  85.     "pre": HTMLPreElement;
  86.     "progress": HTMLProgressElement;
  87.     "q": HTMLQuoteElement;
  88.     "rp": HTMLElement;
  89.     "rt": HTMLElement;
  90.     "ruby": HTMLElement;
  91.     "s": HTMLElement;
  92.     "samp": HTMLElement;
  93.     "script": HTMLScriptElement;
  94.     "section": HTMLElement;
  95.     "select": HTMLSelectElement;
  96.     "slot": HTMLSlotElement;
  97.     "small": HTMLElement;
  98.     "source": HTMLSourceElement;
  99.     "span": HTMLSpanElement;
  100.     "strong": HTMLElement;
  101.     "style": HTMLStyleElement;
  102.     "sub": HTMLElement;
  103.     "summary": HTMLElement;
  104.     "sup": HTMLElement;
  105.     "table": HTMLTableElement;
  106.     "tbody": HTMLTableSectionElement;
  107.     "td": HTMLTableDataCellElement;
  108.     "template": HTMLTemplateElement;
  109.     "textarea": HTMLTextAreaElement;
  110.     "tfoot": HTMLTableSectionElement;
  111.     "th": HTMLTableHeaderCellElement;
  112.     "thead": HTMLTableSectionElement;
  113.     "time": HTMLTimeElement;
  114.     "title": HTMLTitleElement;
  115.     "tr": HTMLTableRowElement;
  116.     "track": HTMLTrackElement;
  117.     "u": HTMLElement;
  118.     "ul": HTMLUListElement;
  119.     "var": HTMLElement;
  120.     "video": HTMLVideoElement;
  121.     "wbr": HTMLElement;
  122. }

犯过的错

刚使用TS，照猫画虎使用，看到别的标签有单独的类型，使用section标签，以为也会有，又是百度又是群里问人，耗时耗力都没找到对应类型，最后找了个名字带section的类型提交了😂，被打回来了
image.png

事件类型定义

MouseEvent举例

https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
image.png

Vue+TS中使用

https://github.com/Armour/vue-typescript-admin-template/blob/88b7440b3330324cf639d5cbeb5350994d020473/src/components/RightPanel/index.vue
内置对象，无需引入，直接使用
image.png

React+TS中使用

因为React 中标签触发的事件对象，是合成的，并不是原生dom的事件对象。所以需要单独从React中引入类型定义，并不是内置的MouseEvent类型

import React, { memo, MouseEvent, useState } from ‘react’

image.png

Nodejs使用TS

TypeScript 核心库的定义中不包含 Node.js 部分。
Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：

npm install @types/node —save-dev

image.png