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

997 阅读4分钟
原文链接: segmentfault.com

1、背景

1.1、需要 TS 包

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

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

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

1.2、两种方案

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

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

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

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

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

2. 动手迁移

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

2.1、获取官方源码

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

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

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

接着我们只选择打出 debouncethrottle 的功能,直接以 ES 方式打包出结果

lodash modularize exports=es include=debounce,throttle

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

利用 cli 打包出 ES 文件夹结构

2.2、改写成 TS 成源码

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

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

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

2.3、添加单元测试用例

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

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

单元测试结果图

这些单元测试用例都是从官方迁移来的,针对 debouncethrottle 的覆盖率都超过 90% 以上;

2.4、最终成果

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

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

3、总结

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

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

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

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

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

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