feng xiaohan

内置对象

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

ECMAScript 的内置对象

ECMAScript 标准提供的内置对象有:

BooleanErrorDateRegExp 等。

我们可以在 TypeScript 中将变量定义为这些类型:

let b: Boolean = new Boolean(1);
let e: Error = new Error("Error occurred");
let d: Date = new Date();
let r: RegExp = /[a-z]/;
let xhr: XMLHttpRequest = new XMLHttpRequest();
let local: Storage = localStorage;
let lo: Location = location;
let promise: Promise<string> = new Promise((r) => r("张三"));
promise.then((res) => {
  // res类型为string
});
let cookie: string = document.cookie;

DOM 和 BOM 的内置对象

DOM 和 BOM 提供的内置对象有:

DocumentHTMLElementEventNodeList 等。

TypeScript 中会经常用到这些类型:

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

例如:

document.addEventListener("click", function (e) {
  console.log(e.targetCurrent);
});

// index.ts(2,17): error TS2339: Property 'targetCurrent' does not exist on type 'MouseEvent'.

上面的例子中,addEventListener 方法是在 TypeScript 核心库中定义的:

interface Document
  extends Node,
    GlobalEventHandlers,
    NodeSelector,
    DocumentEvent {
  addEventListener(
    type: string,
    listener: (ev: MouseEvent) => any,
    useCapture?: boolean
  ): void;
}
  • 定义某个常见 DOM 元素

    // HTML(元素名称)Element、HTMLElement、Element
    let div: HTMLInputElement = document.querySelector("input");
    
  • 定义获取的一组 DOM 元素

    let div: NodeList = document.querySelector("input");
    
  • 定义获取一组类型不固定的 DOM 元素

    let div: NodeListOf<HTMLDivElement | HTMLElement> =
      document.querySelector("div footer");
    

用 TypeScript 写 Node.js

Node.js 不是内置对象的一部分,如果想用 TypeScript 写 Node.js,则需要引入第三方声明文件:

npm install @types/node --save-dev