快速 TypeScript 化 lodash 中的 throttle & debounce 函数

1、背景

1.1、需要 TS 包

TypeScript 写起来爽，然而如果遇到没有现成的 TS 化的工具函数，就需要自己想办法弄出一份类型声明文件了。

前两天要写的小工具库（Typescript 语言写的），因其用到 debounce 和 throttle，虽说 lodash 中带了这两个库，可我又不想将整个 lodash 引入，毕竟我仅仅是写一个小工具，将整个 lodash 打包进去不太合适。

首先想到的就是到社区中有没有现成的 TS 包，当然是有，但并不完美；社区中有 ts-debounce、throttle-typescript 等 TS 包可以直接拿来使用，只不过它们没有同时提供这两个函数，而且其提供的 API 和 lodash 的有出入，使用起来不太顺手。（也可能是我自己没找到正确的 TS 包）

1.2、两种方案

既然如此，只能自己动手解决，有两种解决方式：

【方案一】使用 webpack 4 的 code split 能力，先整体引入 lodash ，而在打包的时候只将所需要的 debounce 和 throttle 部分打包进入;

【方案二】自己动手将 lodash 中的 debounce 和 throttle 这两部分代码 copy 出来形成单独的一个 TS 包

这两种方案都可行，视具体的情况而定，比如大工程项目中使用【方案一】比较合适；而我这边因为多个小工具库都使用到这两个函数，所以采用【方案二】比较合适；

剩下的问题，就是如何完全快速迁移 lodash 中的 debounce 和 throttle，而且需要保证迁移过来的功能是和 lodash 官方的 API 保持一致 —— 最为保险的操作就是去官方源码中获取这两个函数的源码，然后将 JS 写法用 TS 改写一遍。

2. 动手迁移

接下来用简单的文字记录下这个迁移过程

2.1、获取官方源码

lodash 作为广泛使用的基础工具库，它很贴心地提供了自助打包服务，可以定制自己所需要的函数集合，而不用整个引入。

按照官方教程 custom-builds 中的步骤，先安装 lodash-cli 工具

npm i -g npm
npm i -g lodash-cli
lodash -h

接着我们只选择打出 debounce 和 throttle 的功能，直接以 ES 方式打包出结果

lodash modularize exports=es include=debounce,throttle

使用 ES 方式导出必须使用 modularize 模式，获取的源码效果如下：所有的 ES 模块放在 modularize 文件夹下：

2.2、改写成 TS 成源码

由于打包获取的都是 JS 源码，接下来这一步就是将这些代码改写成 TS 格式的。

我主要是为了使用 TS 格式，并非那么注重声明文件的严谨性，所以使用了较为宽松的 TS 语法约束，可以参考我的 tsconfig.json 文件。

将源码经过简单的改写整理，尽可能不更改其源码实现，顶多是调节文件夹结构，最终将源码结构参考 github 仓库中的 src 文件夹

2.3、添加单元测试用例

为了证明这次迁移和官方原有的功能保持一致，特意找到官方的 test 文件夹 lodash/test 中有关 throttle 和 debounce 的测试用例，将其迁移过来，自检这两个函数是否迁移正确

改写后的单元测试用例放在 仓库的 test 文件夹中，单元测试覆盖率如下

这些单元测试用例都是从官方迁移来的，针对 debounce 和 throttle 的覆盖率都超过 90% 以上；

2.4、最终成果

按上面的步骤最终获取的 TS 化版本，源码放在 github 上的 github 仓库 ，同时为方便后续使用也发了 npm 包 包。

通过 npm install ts-debounce-throttle 就能在项目中直接引用使用，亲测可正常使用该 TS 包；

3、总结

从上面过程来看，这种迁移没有难度，顶多属于体力活；

只迁移 debounce 和 throttle 这两个函数工作量并没有想象中那么大，不到 1 个小时就搞定了上述整个迁移过程。

最为重要的是，这种迁移方面我们可以随意自定义 TS 化 lodash 中所需要的工具函数，迁移粒度都可以由自己控制。

如果你也有这方面的需求，不妨按本文的过程亲自实践一番。

在迁移过程中，我顺带阅读这两个函数源码，详细源码解读请参考文章《源码分析 - lodash 中的 debounce & throttle》

下面的是我的公众号二维码图片，欢迎关注交流。