文章目录
声明语句
当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能
比如使用jQuery时,我们获取一个元素:
jQuery('#foo');
// ERROR: Cannot find name 'jQuery'.
但是这时编译器并不知道$
或者jQuery
是什么,所以我们需要使用declare
定义它的类型
declare var jQuery: (selector: string) => any;
jQuery('#foo');
上面的declare var
就是声明语句,它并没有定义一个变量,只是定义了jQuery
的类型,仅仅用于编译时的检查,编译结果中会删除。
声明文件
通常情况,我们会将声明语句放到单独的文件中(jQuery.d.ts
),这个文件就是声明文件:
// src/jQuery.d.ts
declare var jQuery: (selector: string) => any;
声明文件必须以.d.ts
为后缀,当我们将jQuery.d.ts
放入项目中,其他所有的*.ts
文件就都可以获得jQuery
的类型定义了
如果无法解析,可以检查一下tsconfig.json
中的files
、include
、exclude
配置,确保包含了声明文件
第三方声明文件
大部分热门的第三方库的声明文件都不需要我们自己定义了,我们可以直接使用@types
统一管理第三方库的声明文件。
可以在这个页面搜索需要的声明文件,然后使用npm
安装对应的声明模块即可:
npm install @types/jquery --save-dev
书写全局变量
如果第三方库没有提供声明文件,我们需要自己书写声明了,在不同的场景下,声明文件的内容和使用方式有所区别
当通过<script>
标签引入第三方库的时候,会注入全局变量,就像上面的例子一样。建议将声明文件和源码一起放到scr
目录下。
注意,声明全局变量时,文件中不能包括export
关键字,否则就会报错。
声明变量
可以使用declare var
和declare let
和declare const
来声明变量,一般来说全局变量都是禁止修改的常量,所以大部分情况都应该使用const
declare const jQuery: (selector: string) => any;
要注意的是,声明语句中只能定义类型,不要在声明语句中定义具体的实现。
声明函数
使用declare function
来声明全局函数的类型,jQuery
其实就是一个函数,所以也可以使用function
来定义。在函数类型的声明语句中,也支持函数重载
declare function jQuery(cb: () => any)
declare function jQuery(selector: string): any;
声明类
使用declare class
定义一个类:</