Typescript 声明文件 (九)

声明文件

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

新语法索引

由于本章涉及大量新语法,故在本章开头列出新语法的索引,方便大家在使用这些新语法时能快速查找到对应的讲解:

  • 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

文章作者: 雾烟云
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
  目录