`export =` と `esModuleInterop` の関係

背景

Node.js は伝統的に CommonJS モジュールシステムを使用してきました。これは、module.exports と require() を使ってモジュールをエクスポートおよびインポートする方式です。一方、TypeScript は ECMAScript モジュールシステム (ESM) をサポートしており、export と import キーワードを使ってモジュールを扱うことができます。

export = とは

export = は CommonJS スタイルのモジュールで、単一のオブジェクトまたは値をデフォルトエクスポートするための構文です。このモジュールは、他のモジュールからデフォルトインポート (import moduleName from 'moduleName';) して使用されます。

esModuleInterop フラグ

TypeScript コンパイラオプションの esModuleInterop フラグは、CommonJS モジュールと ESM モジュール間の相互運用性を向上させるためのものです。このフラグを有効にすると、TypeScript コンパイラは CommonJS モジュールを ESM スタイルでインポートできるように変換します。

問題と解決策

export = で宣言されたモジュールを ESM スタイルで直接インポートしようとすると、以下のエラーが発生します:

This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag   .

このエラーを解決するには、以下の方法があります:

1. デフォルトインポートを使用する
   

   import moduleName from 'moduleName';
   

2. esModuleInterop フラグを有効にする
   TypeScript コンパイラの設定ファイル (tsconfig.json) で esModuleInterop フラグを true に設定します:

   {
     "compilerOptions": {
       "esModuleInterop": true
     }
   }
   

   これにより、CommonJS モジュールを ESM スタイルでインポートできるようになります。ただし、一部のケースでは問題が生じる可能性があるため、注意が必要です。

export = の使用例

// module.ts
export = {
    foo: function() {
        console.log("foo");
    },
    bar: "bar"
};

このモジュールは、単一のオブジェクトをデフォルトエクスポートしています。

tsconfig.json ファイルで esModuleInterop フラグを true に設定します:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

export = モジュールのインポート

esModuleInterop フラグを有効にした場合、以下の方法でインポートできます:

// main.ts
import myModule from './module';

myModule.foo();
console.log(myModule.bar);

esModuleInterop フラグを無効にしている場合、デフォルトインポートのみが可能です:

// main.ts
import * as myModule from './module';

myModule.foo();
console.log(myModule.bar);

注意

• 適切な方法を選択することで、TypeScript プロジェクトにおけるモジュール間の相互運用性を確保することができます。
• export = モジュールは、デフォルトインポートするか、esModuleInterop フラグを有効にして ESM スタイルでインポートする必要があります。
• esModuleInterop フラグを有効にすると、CommonJS モジュールを ESM スタイルでインポートできるようになりますが、一部のケースでは問題が発生する可能性があります。

export = は、CommonJS スタイルのモジュールで、単一のオブジェクトまたは値をデフォルトエクスポートするための構文です。しかし、この方法にはいくつかの制限があります。特に、ESM (ECMAScript Modules) スタイルのインポートとの互換性が制限されることがあります。

代替手法1: デフォルトインポート

最も一般的な方法は、デフォルトインポートを使用することです。これは、export = でエクスポートされたモジュールをインポートする標準的な方法です。

// module.ts
export = {
    foo: function() {
        console.log("foo");
    },
    bar: "bar"
};

// main.ts
import myModule from './module';

myModule.foo();
console.log(myModule.bar);

TypeScript コンパイラオプションの esModuleInterop フラグを有効にすることで、CommonJS モジュールを ESM スタイルでインポートできるようになります。

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

これにより、以下のような ESM スタイルのインポートが可能になります:

// main.ts
import * as myModule from './module';

myModule.foo();
console.log(myModule.bar);

• デフォルトインポートは、export = モジュールをインポートする最も一般的な方法であり、多くの場合に推奨されます。