web-dev-qa-db-ja.com

esModuleInteropがTypeScriptトランスピレーションの設定に該当する場合、明示的なallowSyntheticDefaultImportsが必要ですか?

次の理論の確認が必要です。 TS docs によると、tsconfig.jsonで設定できる2つのオプションがあります。

  1. -allowSyntheticDefaultImports:デフォルトのエクスポートなしでモジュールからのデフォルトのインポートを許可。これはコードの出力には影響せず、型チェックのみです。

  2. -esModuleInterop:ランタイムbabelエコシステムの__importStarおよび__importDefaultヘルパーを発行互換性とタイプシステムの互換性のために--allowSyntheticDefaultImportsを有効にします。

グーグルで検索すると、両方がtrueに設定されています(少なくとも私が目指している動作に関して)。ただし、ドキュメント、TS、およびJSへのトランスパイルを理解している限り、両方を使用する意味はありません。

私の考えでは、後者のみを使用し、前者を完全に削除します。しかし、用心深く謙虚であるため、私は完全に確信が持てず、現時点では気づかないうちにあまり明るくないことをしているのではないかと心配しています。

後でロバに噛まれて、何時間も嘆き悲しみ、髪を引っ張って必死にトラブルシューティングを行うのは、不適切なことだと思います。懐疑論の根拠は両方のオプションが利用可能であるため、すべての組み合わせ(true/falseなど)が必要な4つのケースがあると推測していますが、彼らがどれであるか想像してはいけません。

-allowSyntheticDefaultImportsif-esModuleInterop:trueincompilerOptions?もしそうなら、なぜそのオプションがあるのですか?

ボーナスの質問:これら2つのオプションの4つの組み合わせすべて(true/false)で必要になるのはいつですか?

12

allowSyntheticDefaultImportsを未定義のままにしてesModuleInteropのみを定義できる場合、答えはYESである必要がありますが、これには問題があります。 PR#26866 は修正されたようで、9月17日にのみマージされたため、短期的にはリスクが生じる可能性があります。

両方が存在する理由として、これらは両方ともBabelでトランスポートされたモジュールのインポートとの互換性の問題に対処するための一部であり、元のPRは特定のコンパイル時メッセージにallowSyntheticDefaultImportsオプションを追加しましたが、実際には輸入。 --esModuleInteropは後で追加されました。ドキュメントを更新する方法については、 TypeScript-Handbook /#816 を参照してください...

9
Burt_Harris

まあ、私の理解では、allowSyntheticDefaultImportsは(開発時で)es6 +をターゲットとする場合、CommonJSライブラリをより簡単にロードできるためであり、esModuleInteropはこれらのインポートを(ランタイムで)簡略化するためです。たとえば、AMDをターゲットにしている場合(私と同じように)。

ドキュメントによると、allowSyntheticDefaultImportsを有効にしている場合、esModuleInteropを明示的に指定する必要はありませんが、allowSyntheticDefaultImportsも有効にしなければならなかった理由は、ResharperがVisual Studioで構文チェックを行うときに、そのフラグで。とにかくesModuleInteropだけでビルドして正常に動作しましたが、他のフラグも有効にするまでResharperから多くの赤い警告を受け取りました。

2
Souldrinker