React x TypeScript 学習 (3) - import module

概要

Reac x TypeScriptの1,2回目で、React x TypeScriptの開発環境を構築しました。

hikidasu.hatenablog.com

hikidasu.hatenablog.com

そこで、tsxのモジュール読み込みを以下のようにしていました。

import * as React from 'react'  
import * as ReactDOM from 'react-dom'  

ただ、import * as ...の「* as」の部分を都度書くことになり煩雑になりそうです。
今回はこのモジュール記述を簡潔にしていきたいと思います。

実装

tsconfig.json

tsconfig.jsonにいくつかオプション追加で対応できます。
第1回で作成したtsconfig.jsonに追記した結果がこちらです。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ]
}

"allowSyntheticDefaultImports" と "esModuleInterop" を追加してそれぞれ true にセットしています。これにより、先の記述が

import React from 'react'
import ReactDOM from 'react-dom'

と、このように書くことができます。

allowSyntheticDefaultImports

まず、tsconfig.jsonに追記したうちの一つ、allowSyntheticDefaultImports について見ていこうと思います。

www.typescriptlang.org

こちらによると、
Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
とあります。

trueに設定することで、モジュールのデフォルトインポートを許容するようになります。

esModuleInterop

次に、esModuleInterop ですがこちらもドキュメントによると、こう記載されています。
Emit importStar and importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.

こちらもデフォルトインポートの使用に関する設定になります。

両方の設定は必要か？

allowSyntheticDefaultImports と esModuleInterop を追加して、importの書き方が簡略化できましたが、両方の設定は必要なのでしょうか？実は今の環境でallowSyntheticDefaultImportsを外してesModuleInteropのみ残したままでもimportの書き方を簡略化しつつ、ローカルサーバやビルド時でも正常に動作しました。

esModuleInteropの説明にも、「... enable --allowSyntheticDefaultImports for typesystem compatibility.」とあり、esModuleInteropを有効にすると、allowSyntheticDefaultImportsも合わせて有効にしてくれるようです。

stackoverflowでも以下のやりとりがされていましたが、esModuleInteropは後から出てきた設定で、2018年のPull Requestで上述のようなallowSyntheticDefaultImportsの有効化も行えるようになった模様です。

stackoverflow.com

ちなみに、今回の追記をせずimport * as ...の「* as」部分を削除すると、tsでエラーメッセージが表示されます。

エラーメッセージは使用するモジュールによって変わるでしょうが、esModuleInteropフラグを使ったらデフォルトインポートでなんとかなるような具合です。

振り返り

細かな設定がありますが、import文の書き方もtsconfig.jsonのオプション指定で調整できることが分かりました。