2
2
3
3
当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。
4
4
5
+ ## 新语法索引
6
+
7
+ 由于本章涉及大量新语法,故在本章开头列出新语法的索引,方便大家在使用这些新语法时能快速查找到对应的讲解:
8
+
9
+ - [ ` declare var ` ] ( #declare-var ) 声明全局变量
10
+ - [ ` declare function ` ] ( #declare-function ) 声明全局方法
11
+ - [ ` declare class ` ] ( #declare-class ) 声明全局类
12
+ - [ ` declare enum ` ] ( #declare-enum ) 声明全局枚举类型
13
+ - [ ` declare namespace ` ] ( #declare-namespace ) 声明(含有子属性的)全局对象
14
+ - [ ` interface ` 和 ` type ` ] ( #interface-he-type ) 声明全局类型
15
+ - [ ` export ` ] ( #export ) 导出变量
16
+ - [ ` export namespace ` ] ( #export-namespace ) 导出(含有子属性的)对象
17
+ - [ ` export default ` ] ( #export-default ) ES6 默认导出
18
+ - [ ` export = ` ] ( #export-1 ) commonjs 导出模块
19
+ - [ ` export as namespace ` ] ( #export-as-namespace ) UMD 库声明全局变量
20
+ - [ ` declare global ` ] ( #declare-global ) 扩展全局变量
21
+ - [ ` declare module ` ] ( #declare-module ) 扩展模块
22
+ - [ ` /// <reference /> ` ] ( #san-xie-xian-zhi-ling ) 三斜线指令
23
+
5
24
## 什么是声明语句
6
25
7
26
假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过 ` <script> ` 标签引入 jQuery,然后就可以使用全局变量 ` $ ` 或 ` jQuery ` 了。
@@ -504,6 +523,13 @@ jQuery.ajax('/api/get_something');
504
523
505
524
不管采用了以上两种方式中的哪一种,我都* 强烈建议* 大家将书写好的声明文件(通过给原作者发 pull request,或者直接提交到 ` @types ` 里)发布到开源社区中,享受了这么多社区的优秀的资源,就应该在力所能及的时候给出一些回馈。只有所有人都参与进来,才能让 ts 社区更加繁荣。
506
525
526
+ npm 包的声明文件主要有以下几种语法:
527
+
528
+ - ` export ` 导出变量
529
+ - ` export namespace ` 导出(含有子属性的)全局对象
530
+ - ` export default ` ES6 默认导出
531
+ - ` export = ` commonjs 导出模块
532
+
507
533
#### ` export `
508
534
509
535
npm 包的声明文件与全局变量的声明文件有很大区别。在 npm 包的声明文件中,使用 ` declare ` 不再会声明一个全局变量,而只会在当前文件中声明一个局部变量。只有在声明文件中使用 ` export ` 导出,然后在使用方 ` import ` 导入后,才会应用到这些类型声明。
@@ -876,7 +902,7 @@ bar.bar();
876
902
877
903
### 声明文件中的依赖
878
904
879
- 在一个声明文件中,有时会依赖另一个声明文件中的类型 ,比如在前面的 ` declare module ` 的例子中,我们就在声明文件中导入了 ` moment ` ,并且使用了 ` moment.CalendarKey ` 这个类型:
905
+ 一个声明文件有时会依赖另一个声明文件中的类型 ,比如在前面的 ` declare module ` 的例子中,我们就在声明文件中导入了 ` moment ` ,并且使用了 ` moment.CalendarKey ` 这个类型:
880
906
881
907
``` ts
882
908
// types/moment-plugin/index.d.ts
@@ -921,7 +947,7 @@ foo({});
921
947
922
948
三斜线指令的语法如上,` /// ` 后面使用 xml 的格式添加了对 ` jquery ` 类型的依赖,这样就可以在声明文件中使用 ` JQuery.AjaxSettings ` 类型了。
923
949
924
- 注意,三斜线指令必须放在文件的最顶端,一个三斜线指令的前面只能出现单行或多行注释,当然包括其它的三斜线指令 。
950
+ 注意,三斜线指令必须放在文件的最顶端,三斜线指令的前面只允许出现单行或多行注释 。
925
951
926
952
##### ** 依赖** 一个全局变量的声明文件
927
953
@@ -943,15 +969,15 @@ import { foo } from 'node-plugin';
943
969
foo (global .process );
944
970
```
945
971
946
- 在上面的例子中,我们是通过三斜线指引入的 ` node ` 的类型,然后在声明文件中使用了 ` NodeJS.Process ` 这个类型。最后在使用到 ` foo ` 的时候,传入了 ` node ` 中的全局变量 ` process ` 。
972
+ 在上面的例子中,我们通过三斜线指引入了 ` node ` 的类型,然后在声明文件中使用了 ` NodeJS.Process ` 这个类型。最后在使用到 ` foo ` 的时候,传入了 ` node ` 中的全局变量 ` process ` 。
947
973
948
- 由于引入的 ` node ` 的类型都是全局变量的类型 ,它们是没有办法通过 ` import ` 来导入的,所以只能通过三斜线指令来引入了 。
974
+ 由于引入的 ` node ` 中的类型都是全局变量的类型 ,它们是没有办法通过 ` import ` 来导入的,所以这种场景下也只能通过三斜线指令来引入了 。
949
975
950
- 以上两种使用场景下,都是由于需要书写或需要依赖全局变量的声明文件,所以必须使用三斜线指令。在其他的一些不是必要的情况下 ,就都需要使用 ` import ` 来导入了 。
976
+ 以上两种使用场景下,都是由于需要书写或需要依赖全局变量的声明文件,所以必须使用三斜线指令。在其他的一些不是必要使用三斜线指令的情况下 ,就都需要使用 ` import ` 来导入 。
951
977
952
978
##### 拆分声明文件
953
979
954
- 除了以上两种场景之外, 当我们的全局变量的声明文件太大时,也可以通过拆分为多个文件,最后在一个入口文件中将它们全部引入 ,来提高代码的可维护性。比如 ` jQuery ` 的声明文件就是这样的:
980
+ 当我们的全局变量的声明文件太大时,可以通过拆分为多个文件,然后在一个入口文件中将它们一一引入 ,来提高代码的可维护性。比如 ` jQuery ` 的声明文件就是这样的:
955
981
956
982
``` ts
957
983
// node_modules/@types/jquery/index.d.ts
@@ -965,9 +991,13 @@ foo(global.process);
965
991
export = jQuery ;
966
992
```
967
993
994
+ 其中用到了 ` types ` 和 ` path ` 两种不同的指令。它们的区别是:` types ` 用于声明对另一个库的依赖,而 ` path ` 用于声明对另一个文件的依赖。
995
+
996
+ 上例中,` sizzle ` 是与 ` jquery ` 平行的另一个库,所以需要使用 ` types="sizzle" ` 来声明对它的依赖。而其他的三斜线指令就是将 ` jquery ` 的声明拆分到不同的文件中了,然后在这个入口文件中使用 ` path="foo" ` 将它们一一引入。
997
+
968
998
##### 其他三斜线指令
969
999
970
- 除了这种三斜线指令 ,还有其他的三斜线指令,比如 ` /// <reference no-default-lib="true"/> ` , ` /// <amd-module /> ` 等,但它们都是废弃的语法,故这里就不介绍了,详情可见[ 官网] ( http://www.typescriptlang.org/docs/handbook/triple-slash-directives.html ) 。
1000
+ 除了这两种三斜线指令之外 ,还有其他的三斜线指令,比如 ` /// <reference no-default-lib="true"/> ` , ` /// <amd-module /> ` 等,但它们都是废弃的语法,故这里就不介绍了,详情可见[ 官网] ( http://www.typescriptlang.org/docs/handbook/triple-slash-directives.html ) 。
971
1001
972
1002
### 最佳实践
973
1003
0 commit comments