lodashのpartial importとTypeScript

2018-10-11

Twitter をやめたので、やたらブログの更新頻度が上がってます。

それはさておき、タイトル通りなんですが。

lodash の関数を一部だけ使用したい場合などに、partial import を行いたいケースは少なくないと思います。

で、TypeScript を使っている場合、以下のいずれかで partial import できると思いますよね。

  • import debounce from "lodash.debounce";
  • import debounce from "lodash/debounce";
  • import * as debounce from "lodash.debounce";
  • import * as debounce from "lodash/debounce";
  • import { debounce } from "lodash.debounce";
  • import { debounce } from "lodash/debounce";

が、create-react-appの TypeScript 版とかを使ってると、全部エラーを吐きます。

そこで、今までは、以下のように書いてごまかしてました。

const lodash = require("lodash.debounce");

ただ、この書きっぷりだと、tslint でエラーを吐くのと、何より美しくありません。

ということで、ちょっとばかり調べてみたところ、以下の issue が引っかかりました。

Question - Importing single function with typescript, lodash, jest

issue を見てもらうとわかりますが、みんな結構苦労しているようで…。

解決方法は issue を見てもらうとして、以下の記述がちょっと気になりました。

  1. tsconfig.json のcompilerOptionsmoduleesnextからcommonjsに変える
  2. tsconfig.json のcompilerOptionsallowSyntheticDefaultImportstrueに変える
  3. tsconfig.json のcompilerOptionsesModuleInteroptrueに変える

で、今までなんとなーく設定していた tsconfig だったので、上記の項目について、ちょっと調べてみました。

まず、1.のmoduleの違いについては、以下の記事が参考になりました。

いかんせん自分の理解力が足りないのでアレなんですが、多分、TypeScript による import の対応が違って、それによって出力されるコードのパフォーマンスが変わってくるみたいな…?

まぁ、よくわからなかったです。

次に、2.について、これは以下の記事の通りです。

なんとなく、true にすると危なそうです。

最後に 3.について、これは以下の記事の通りです。

よくわからんです、難しい。

ひとまず、moduleesnextからcommonjsに変えたら解消されたんですが、これで良かったのかは不明です。

パフォーマンスが落ちたりするのかなぁ…。

© 2018 kk-web