声明
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。