声明文件
当使用第三方库的时候,我们需要引用它的声明文件,才能获得对应的代码补全,接口提示等功能
新语法索引
由于本章涉及大量新语法,故在本章开头列出新语法的索引,方便大家在使用这些新语法时能快速查找到对应的讲解:
- declare var 声明全局变量
- declare function 声明全局方法
- declare class 声明全局类
- declare enum 声明全局枚举类型
- declare namespace 声明(含有子属性的)全局对象
- interface 和 type 声明全局类型
- export 导出变量
- export namespace 导出(含有子属性的)对象
- export default ES6 默认导出
- export = commonjs 导出模块
- export as namespace UMD 库声明全局变量
- declare global 扩展全局变量
- declare module 扩展模块
- ///
三斜线指令
什么是声明语句
假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过 script 标签引入 jQuery,然后就可以使用全局变量$ 或者 jquery 了
我们通常这样获取一个 id 是 foo 的元素
$('#foo')
// or
jQuery('#foo')
但是在 ts 中,编辑器并不知道$或者 jquery 什么东西
jquery('#foo')
// ERROR: Cannot find name 'jQuery'.
这时,我们需要使用 declare var 来定义它的类型
declare var jQuery: (selector: string) => any
jQuery('#foo')
上例中,declare var 并没有真的定义一个变量,只是定义了全局变量 jQuery 的类型,仅仅会用于编译时的检查,在编译结果中会被删除。它编译结果是
jQuery('#foo')
除了 declare var 之外,还有其他很多种声明语句,将会在后面详细介绍。
什么是声明文件
通常我们会把声明语句放到一个单独的文件(jquery.d.ts)中,这就是声明文件
//src/jquery.d.ts
declare var jquery: (selector: string) => any
使用的时候
// src/index.ts
jquery('#foo')
声明文件必须以.d.ts 为后缀
一般来说,ts 会解析项目中所有的 _.ts 文件,当然也包含以.d.ts 结尾的文件,所以当我们将 jquery.d.ts 放到项目中的时候,其他所有的*.ts 文件就可以获得 jquery 类型定义了
/path/to/project
├── src
| ├── index.ts
| └── jQuery.d.ts
└── tsconfig.json
假如仍然无法解析,那么检查下 tsconfig.json 和 files,include 和 exclude 配置,确保其包含了 jquery.d.ts
这里只演示了全局变量这种模式的声明文件,加入通过模块导入的就是使用第三方库,那么引入声明文件又是另外的方法
第三方声明文件
当然,jquery 的声明文件不需要我们定义了。可以直接安装
推荐的是使用@types 统一管理第三方库的声明文件
@types 的使用方式很简单,直接用 npm 安装对应的声明模块即可,以 jquery 举例
你可以点击下面去查询 点击我查询
如果点不开可以复制链接 https://www.typescriptlang.org/dt/search?search=
cnpm install @types/jquery --save-dev