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

一、背景

1.一、须要 TS 包

TypeScript 写起来爽，然而若是遇到没有现成的 TS 化的工具函数，就须要本身想办法弄出一份类型声明文件了。

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

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

1.二、两种方案

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

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

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

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

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

2. 动手迁移

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

2.一、获取官方源码

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.二、改写成 TS 成源码

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

我主要是为了使用 TS 格式，并不是那么注重声明文件的严谨性，因此使用了较为宽松的 TS 语法约束，能够参考个人 tsconfig.json 文件。

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

2.三、添加单元测试用例

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

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

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

2.四、最终成果

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

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

三、总结

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

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

最为重要的是，这种迁移方面咱们能够随意自定义 TS 化 lodash 中所须要的工具函数，迁移粒度均可以由本身控制。

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

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

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