乐趣区

6-ts-声明相关

声明

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 
退出移动版