声明
1. 声明文件
当使用第三方库时,我们需要引用他的声明文件,擦能获得对应的代码补全、接口提示等功能
2. 声明语句
使用语句定义类型
declare var
declare function
declare class
......
3. 声明文件
将存放声明语句的文件称为声明文件 ,通常会把声明语句放到一个单独的文件中(jQuery.d.ts)。
声明文件必需以 .d.ts 为后缀
4. 第三方声明文件
有些库已经有定义好的声明文件,我们可以直接下载使用,最好是使用 @types 统一管理第三方库的声明文件。
npm install @type/ 第三方库 --save-dev
eg: npm install @type/jquery --save-dev
第三方库声明文件查询链接
5. 书写声明文件
当一个第三方库没有提供声明文件时,我们需要自己书写声明文件,不同场景下,声明文件的内容和使用方式不同:
-
全局变量:
通过 <script> 标签引入第三方库,注入全局变量
-
npm 包:
通过 import dateFormat from 'DateFormat' 导入,符合 ES6 模块规范
-
UMD 库:
既可以通过 <script> 标签引入,也可以通过 import 导入
-
模块插件:
通过 import 导入后,可以改变另一个模块的结构
-
直接扩展全局变量:
通过 <script> 标签引入后,改变一个全局变量的结构。比如为 String.prototype 新增一个方法
-
通过导入扩展全局变量:
通过 import 导入后,可以改变一个全局变量的结构
6. 全局变量
// 假如使用第三方库 jQuery,在 html 中通过 <script> 标签引入 jQuery,然后就可以使用全局变量 $/jQuery 了,在 ts 中使用方法如下:declare var jQuery:(selector:string) => any;
jQuery('#id');
// declare var 并没有真的定义一个变量,只是定义了全局变量 jQuery 的类型,仅仅会用于编译时的检查,在编译结果中会被删除
使用全局变量的声明文件时,如果是通过 npm install @type/xxx –save-dev 方式安装的,则不需要任何配置。
如果是将声明文件 xxx.d.ts 直接存放于当前项目中,最好和其他源码放在一个目录下便于整理。
如果声明文件没有生效,可以检查一下 tsconfig.json 中的 files、include 和 exclude 配置,确保其包含了 jQuery.d.ts 文件。
全局变量的声明文件的语法:
- declare var 声明全局变量
// declare let/const, let 和 var 没有什么区别,使用 const 定义的是常量,不允许修改值,一般全局变量都是禁止修改的常量,所以 const 更常用。- declare function 声明全局方法
- declare class 声明全局类
- declare enum 声明全局枚举类型
- declare namespace 声明全局对象(含有子属性)- interface 和 type 声明全局类型
声明语句中只能定义类型,不能定义具体的值!
declare var