TypeScript - 声明文件和内置对象

前言

本文主要记录下 TypeScript 中的声明文件和内置对象，日常学习总结篇。

一、声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

1⃣️、什么是声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过<script> 标签引入 jQuery，然后就可以使用全局变量 $ 或者 jQuery 了。但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么东西。这时，我们需要使用 declare var 来定义它的类型。

declare var jQuery: (selector: string) => any;

jQuery('#foo');

2⃣️、什么是声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件。

声明文件必须以 .d.ts 为后缀。

一般来说，ts 会解析项目中所有的 *.ts 文件，当然也包含以 .d.ts 结尾的文件。

3⃣️、第三方声明文件

推荐使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：

npm install @types/jquery --save-dev

二、内置对象

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

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

1⃣️、ECMAScript 的内置对象：Boolean、Number、String、Error、Date、RegExp等。

let b: Boolean = new Boolean(1)
let n: Number = new Number(true)
let s: String = new String('abc')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')

// let bb: boolean = new Boolean(2) // 报错：不能将类型“Boolean”分配给类型“boolean”。“boolean”是基元，但“Boolean”是包装器对象。

2⃣️、DOM 和 BOM 的内置对象：Window、Document、 HTMLElement、DocumentFragment、Event、NodeList 等。

const div: HTMLElement = document.getElementById('app')
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
  console.dir(event.target)
})
const fragment: DocumentFragment = document.createDocumentFragment()

3⃣️、TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的。 

当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如：

Math.pow(10, '2') // 报错：类型“string”的参数不能赋给类型“number”的参数。

上面的例子中，Math.pow 必须接受两个 number 类型的参数。事实上 Math.pow 的类型定义如下：

interface Math {
    /**
     * Returns the value of a base expression taken to a specified power.
     * @param x The base value of the expression.
     * @param y The exponent value of the expression.
     */
    pow(x: number, y: number): number;
}

 再举一个 DOM 中的例子：

document.addEventListener('click', function(e) {
  // console.log(e.targetCurrent); // 报错：类型“MouseEvent”上不存在属性“targetCurrent”。
});

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

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

所以 e 被推断成了 MouseEvent，而 MouseEvent 是没有 targetCurrent 属性的，所以报错了。

4⃣️、用 TypeScript 写 Node.js

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

npm install @types/node --save-dev