6. 其它 | TS 快速上手

声明文件

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

什么是声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了。

但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么东西。

这时，我们需要使用 declare var 来定义它的类型。

declare var $: any;

declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。

一般声明文件都会单独写成一个 xxx.d.ts 文件。

创建 01_jQuery.d.ts，将声明语句定义其中，TS编译器会扫描并加载项目中所有的TS声明文件。

很多的第三方库都定义了对应的声明文件库，库文件名一般为 @types/xxx，在 https://www.npmjs.com/package/@types/package 进行搜索。

有的第三库在下载时就会自动下载对应的声明文件库（比如：webpack），有的可能需要单独下载（比如jQuery/react）。

内置对象

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

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

ECMAScript 的内置对象

• Boolean
• Number
• String
• Date
• RegExp
• Error

/* 1. ECMAScript 的内置对象 */
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')
b = true
// let bb: boolean = new Boolean(2)  // error

BOM 和 DOM 的内置对象

• Window
• Document
• HTMLElement
• DocumentFragment
• Event
• NodeList

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