类型声明
假如我们想要直接使用第三方 jQuery,最常见的一种方式就是在 html 中通过 script 标签中引入 jQuery,然后就可以通过全局变量 $ 或者 jQuery 来使用jQuery了。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery("#main");
// 或者
$("3main");
</script>然而在 TypeScript 环境中,编译器并不知道 $ 或 jQuery 是什么,这时我们这就需要借助声明来定义$或jQuery的类型。
// 类型声明语句
declare var jQuery: (selector: string) => any;
// 通过在上方的定义类型后,我们就可以正常的使用 jQuery 了
jQuery("#main");在上面的例子中 declare var 并没有真正意义上定义一个变量,而是定义了一个全局变量 jQuery 的类型,仅用于编译时检查。除了 declare var 之外,还有其它很多种声明语句。后面我们会逐一介绍。
声明语句中只能定义类型,不能定义具体的值或实现。
什么是声明文件?
通常我们会把声明语句统一放置在一个单独的文件(jQuery.d.ts)中,这个.d.ts就是声明文件。所有的声明文件都必须以 .d.ts 后缀结尾。
// src/jQuery.d.ts
declare var jQuery: (selector: string) => any;
// src/example.ts
jQuery("#main");在上面的示例中,我们演示了全局变量 jQuery 的声明。TypeScript 会自动解析项目中所有的 *.ts 文件,当然也包含 .d.ts 文件。
第三方库声明文件
我们可以自己为自己的项目编写声明文件,那么第三方库也有属于自己的声明文件。在市面上的大部分 npm 软件包都具有自己的类型声明文件,我们可以直接下载下来使用,例如下载 jQuery 的声明文件。下载 jQuery 的声明文件后,我们就不需要自己去编写它的类型声明了。
对于第三方的声明文件,我们只需要下载下来即可,无需任何配置。如果是在项目中自己维护的声明文件,则建议和源码一起放在 src 目录下(或者对应源码的目录下)。
这有帮助吗?