高速Typeスクリプト化lodashのthrottle&debounce関数

1、背景

1.1、TSパッケージが必要

TypeScriptはさわやかですが、既存のTS化されたツール関数がない場合は、自分でタイプ宣言ファイルを作る必要があります.
先日書く小道具庫(Typescript言語で書かれています)は、debounceとthrottleを使っているので、lodashにはこの2つの庫が入っていますが、lodash全体を導入したくありません.結局、私は小道具を1つ書くだけなので、lodash全体を梱包するのは適切ではありません.
まず、コミュニティに既成のTSパッケージがあるかどうかを考えます.もちろんありますが、完璧ではありません.コミュニティにはts-debounce、throttle-typescriptなどのTSパッケージがありますが、この2つの関数を同時に提供していないだけでなく、提供されているAPIとlodashの違いがあり、使い勝手が悪いです.(自分で正しいTSバッグが見つからなかったのかもしれません)

1.2、二つの方案

それなら、自分で解決するしかない.2つの解決方法がある.
【スキーム1】webpack 4のcode split能力を用いて、まずlodashを全体的に導入し、パッケージ化時に必要なdebounceとthrottleの部分のみをパッケージ化する.
【スキーム2】lodashのdebounceとthrottleの2つの部分コードcopyを自分で手で出して個別のTSパケットを形成する
この2つの案はいずれも実行可能で、具体的な状況によって異なり、例えば大工事プロジェクトで「案一」を使用するのが適切である.こちらは複数の小さなツールライブラリがこの2つの関数を使用しているので、【シナリオ2】を採用するのが適切です.
残りの問題は、lodashのdebounceとthrottleを完全に迅速に移行する方法であり、移行した機能がlodash公式のAPIと一致していることを保証する必要があります.最も安全な操作は、公式ソースコードからこの2つの関数のソースコードを取得し、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に関するテスト例をわざわざ見つけて、それを移行して、この2つの関数が正しく移行したかどうかを検査します.
書き換えたユニットテストの例は倉庫のtestフォルダに置かれ、ユニットテストのカバー率は以下の通りである.
これらのユニットのテスト例は、debounceおよびthrottleに対するカバー率が90%以上を超える公式から移行した.

2.4、最終成果

上記の手順に従って最終的に取得したTS化バージョンでは、github上のgithub倉庫にソースコードが置かれ、その後の使用を容易にするためにnpmパッケージも配布されています.npm install ts-debounce-throttleによってプロジェクトで直接引用して使用することができ、親測はこのTSパッケージを正常に使用することができる.

3、まとめ

上の過程から見ると、このような移転は難しくなく、せいぜい体力的な仕事に属している.debounceとthrottleの2つの関数のみを移行する作業量は想像ほど大きくなく,1時間もしないうちに上記の移行プロセス全体を完了した.
最も重要なのは,この移行においてTS化lodashに必要なツール関数を任意にカスタマイズでき,移行粒度は自己制御できることである.
もしあなたもこの方面の需要があれば、本文の過程によって自分で実践してみてください.
移行の過程で、私はついでにこの2つの関数のソースコードを読んで、詳しいソースコードの解読は文章《ソースコード分析-lodashの中のdebounce&throttle》を参照してください
次は私の公衆番号のQRコードの画像で、交流に注目してください.