lodashのpartial importとTypeScript
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 を見てもらうとして、以下の記述がちょっと気になりました。
- tsconfig.json の
compilerOptionsのmoduleをesnextからcommonjsに変える - tsconfig.json の
compilerOptionsのallowSyntheticDefaultImportsをtrueに変える - tsconfig.json の
compilerOptionsのesModuleInteropをtrueに変える
で、今までなんとなーく設定していた tsconfig だったので、上記の項目について、ちょっと調べてみました。
まず、1.のmoduleの違いについては、以下の記事が参考になりました。
- Docs: Difference between esnext, es6, es2015 module targets
- TypeScript で Isomorphic な Code Splitting をする
いかんせん自分の理解力が足りないのでアレなんですが、多分、TypeScript による import の対応が違って、それによって出力されるコードのパフォーマンスが変わってくるみたいな…？
まぁ、よくわからなかったです。
次に、2.について、これは以下の記事の通りです。
なんとなく、true にすると危なそうです。
最後に 3.について、これは以下の記事の通りです。
よくわからんです、難しい。
ひとまず、moduleをesnextからcommonjsに変えたら解消されたんですが、これで良かったのかは不明です。
パフォーマンスが落ちたりするのかなぁ…。