快速 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》

下面的是個人公衆號二維碼圖片，歡迎關注交流。