本篇文章来讲 TypeScript 的声明文件。
当我们在使用第三方库的时候,很多第三方库不是用 TS 写的,它们是通过原生的 JavaScript 或者是浏览器 / 或者是 node 提供的 run time 对象。如果我们直接使用 TS 肯定就会报编译不通过。
1. 声明语句
假设一个场景我们需要使用第三方库 JQuery。
之前的方式是在 html 中通过 script 标签引入 JQuery,这样就能全局使用 JQuery,我们通常会通过 jQuery('.app') 去获取对应的 DOM 对象。
但是在 TS 中并不知道 jQuery 是什么东西。
jQuery('app');
当我们直接使用会报错:Cannot find name 'jQuery'.
所以我们需要通过 declare 关键字来告诉 TS 这个变量已经在其他地方被定义了,你直接使用就可以了。
declare let jQuery: (selector: string) => any;
jQuery('app');
这样就不会再报错了。这里需要注意,declare let jQuery 并没有定义一个变量的实现,只是定义了全局变量 jQuery 的类型,仅仅会用于编程时的检查,并不是实现功能的真正代码。
2. 声明文件(.d.ts)
通常我们会把声明语句放在一个单独文件中,声明文件一般以 .d.ts 结尾的,d 就代笔声明。
有了声明文件我们就能享受 TS 带来的红利,在使用时就能获得代码补全和接口提示等功能。
一般来说,默认情况下,TS 编译器会解析项目中所有的 ts 文件,当然也包括 .d.ts 结尾的声明文件。所以上述例子中,我们也会把 jquery.d.ts 放入项目中去,这样所有的 ts 文件都能获得 jquery 的类型定义了。
3. definitelyTyped 社区
当我们想使用第三方库时,我们是不是需要从头到尾写它的声明文件呢?这个工作量显然是很大的。其实这个问题我们不需要考虑,因为TypeScript 社区已经帮我们写好了。
我们可以在 npm 官网 搜索要使用的第三方库的 TS 声明文件包。
比如上去例子中的 jquery,使用下面的命令就能下载安装 types/jquery 包,这个包中就包含 jquery 的的声明文件。
npm install --save @types/jquery
和上面说到的一样,@types/jquery 包中只有类型定义,并没有具体代码的实现。
@types 下的包和普通的 npm 模块是不一样的,它们统一由一个叫 definitelyTyped 的组织进行管理的,它是一个针对于不同库都要提供的一个高质量声明文件的社区,上面提到的 jquery 的声明文件就是由这个社区提供的。
现在有很多第三方库都已经自带了 TS 的声明文件,不需要分开安装了。