ESM导入FileHandlerStatic时报构造器错误，静态调用也失效

问题根源 #

用npx tsc把TypeScript代码编译成ES5时，TS默认输出CommonJS格式的模块。但ESM（ECMAScript模块）导入CommonJS模块时，默认导出会被打包在default属性里，不是直接暴露类本身——这就是你直接用import时，要么找不到构造函数，要么读不到静态方法的原因。

可行解决方案 #

方案1：改TS配置，直接输出ESM格式 #

修改tsconfig.json，让编译后的代码原生支持ESM，这样导入逻辑和CommonJS一致：

{
  "compilerOptions": {
    "target": "ES5", // 保持目标为ES5
    "module": "ESNext", // 输出ESM格式
    "esModuleInterop": true,
    "moduleResolution": "NodeNext",
    "outDir": "./dist" // 指定编译输出目录
  }
}

重新编译后，ESM导入就能直接用：

// ESM导入
import FileHandlerStatic from './dist/index.js';

// 实例化调用
const handler = new FileHandlerStatic();
handler.readFileStreaming();

// 直接调用静态方法
FileHandlerStatic.readFileStreaming();

方案2：不改编译配置，调整ESM导入写法 #

如果必须保持输出CommonJS，导入时手动取default属性就行：

// 写法1：解构默认导出
import { default as FileHandlerStatic } from './index.js';

// 实例化
const handler = new FileHandlerStatic();
handler.readFileStreaming();

// 调用静态方法
FileHandlerStatic.readFileStreaming();

// 写法2：先导入模块对象，再取default
import FileHandlerModule from './index.js';
const FileHandlerStatic = FileHandlerModule.default;

// 后续调用和上面一致

方案3：TS源码里加兼容导出 #

在你的FileHandlerStatic.ts里用export =语法导出，同时开启TS的esModuleInterop配置，让CommonJS和ESM都能正常导入：

// FileHandlerStatic.ts
export class FileHandlerStatic {
  static readFileStreaming() {
    // 你的实现逻辑
  }
  writeFileStreaming() {
    // 你的实现逻辑
  }
}

// 兼容CommonJS和ESM的导出写法
export = FileHandlerStatic;

然后在tsconfig.json里开启esModuleInterop：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "esModuleInterop": true
  }
}

此时CommonJS的require依然正常用，ESM导入就用方案2的写法即可。

验证步骤 #

1. 改完配置或代码后，重新跑npx tsc编译
2. 写个ESM测试文件，验证实例化和静态方法调用都正常
3. 同时确认CommonJS的require方式没被影响

内容的提问来源于stack exchange，提问作者Gary