2

声明

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 

桃小妖
278 声望16 粉丝