TypeScript 内置对象

JavaScript 中有很多内置对象，如 Boolean、Error、Date、RegExp 等，在 TypeScript 中当做定义好了的类型直接使用：

// 在 TypeScript 中将变量定义为这些类型
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

此外 DOM 和 BOM 提供的内置对象，如 Document、HTMLElement、Event、NodeList 等，也可以在 TypeScript 中直接使用：

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

Tip

这些内置对象的定义文件在 TypeScript 核心库的定义文件中可以找到。例如以上示例中 addEventListener 方法是在 TypeScript 核心库中定义的

interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
    addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
}

Warning

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

bash

npm install @types/node --save-dev

操作 DOM

在操作 DOM 时常常需要读取 DOM 对象的属性，但是 TypeScript 文档实际是无法访问到页面的（它需要编译为 JavaScript 并在运行时才可以访问到页面），所以编译器无法确认要访问的 DOM 对象实际是否存在（如果不存在该对象就是 undefined 要读取它的属性就会报错），所以类似的操作往往无法通过编译，一般可以将逻辑代码放在判读语句中，或使用 Not-null 断言操作符 !

const anchor = document.querySelector('a');
// 将访问属性的逻辑代码放在 if 语句内，保证 DOM 对象是存在的
if(anchor) {
    console.log(anchor.href)
}

// 最后使用感叹号 exclamation mark 以告诉编译器该对象不是 null 或 undefined
const anchor = document.querySelector('a')!;
console.log(anchor.href)

不同的 DOM 对象可以访问的属性是不同的，如果我们使用的是 CSS 类选择器（而不是元素选择器）则编译器无法推论变量属于哪一种 HTMLElement，此时可以使用类型断言 as，这样就可以访问元素的特有的属性，并在开发时有正确的代码提示。

Tip

由于使用了类型断言，所以变量就被编译器识别为相应的 DOM 元素，不可能是 null，因此不需要使用 Not-null 断言操作符 ! 了

// 没有使用类型断言时，编译器会将变量 form 推论为 Element | null
// 使用类型断言后，变量 form 会被识别为表格元素
const form = document.querySelector('.new-item-form') as HTMLFormElement;