Typescript - 声明文件

背景：在实际的项目开发过程中难免会遇到第三方的 npm 模块，而这些 npm 模块并不一定都是通过 TS 编写的，所以说它所提供的成员就不会有强类型的体验。类型声明就是一个成员在定义的时候因为种种原因没有声明一个明确的类型，在使用的时候单独为它再做出一个明确的声明。目前一些绝大多数比较常用的 npm 模块都已经提供了对应的声明，只需要安装一下它所对应的类型声明模块。例如：@types/lodash

1、第三方库使用场景，分为三类：全局类库、模块类库、UMD类库

• 全局变量：通过 <script> 标签引入第三方库，注入全局变量

• npm 包：通过 import foo from 'foo' 导入，符合ES6 模块规范

• UMD 库：既可以通过 <script> 标签引入，又可以通过 import 导入

• 模块插件：通过 import 导入后，可以改变另一个模块的结构

• 直接扩展全局变量：通过 <script> 标签引入后，改变一个全局变量的结构。比如为 String.prototype 新增了一个方法

• 通过导入扩展全局变量：通过 import 导入后，可以改变一个全局变量的结构

2、处理 <script> 场景

// 2.1 html 中直接引入
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./varfile.js"></script>  // var foo = "小明"

// 2.2 声明全局变量：typings/global.d.ts 
declare function jQuery(param: string): void // 函数形式
declare let foo: string // 变量形式

// 2.3 直接使用
console.log("JQuery", jQuery("#box")) ;
console.log("ll", foo) // "小明"

3、处理 import 场景

// 3.1 解决直接使用 jquery 报错问题

    // 3.1.1 方式一：安装对应的 types 库
    pnpm i @types/jquery -D

    // 3.2 方式二：声明 declare：types/_missing.ts 
    declare module "jquery"


// 3.2 使用
import jQuery from "jquery"
console.log("JQuery", jQuery("#box")) ;