如何让TypeScript类支持CommonJS require直接导入

背景 #

原有JavaScript类定义：

// MyClass.js
module.exports = class MyClass {
  //...
}

其他JavaScript模块中导入方式：

// otherModule.js
const MyClass = require('./MyClass');

将类转换为TypeScript后，当前定义如下：

// MyClass.ts
class MyClass {
  // ...
}
export default MyClass;

此时在JavaScript文件中必须通过以下两种方式导入：

// otherModule.js
const MyClass = require('./MyClass').default;
// 或
const { default: MyClass } = require('./MyClass');

需求 #

希望避免显式指定default，继续使用const MyClass = require('./MyClass');的方式导入，允许修改TypeScript类的定义或导出方式。

解决方案 #

方案1：沿用CommonJS导出语法 #

直接在TypeScript中使用module.exports导出类，和原JavaScript写法保持一致：

// MyClass.ts
class MyClass {
  // ...
}
module.exports = MyClass;

转译后的JavaScript文件会直接将MyClass赋值给module.exports，原有JS模块无需修改导入代码即可正常使用。

方案2：配置TypeScript编译选项 #

如果希望保留ES模块的export default语法，可修改tsconfig.json开启兼容选项：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "CommonJS" // 针对Node.js环境，该选项为默认值
  }
}

开启esModuleInterop后，TypeScript会自动生成兼容CommonJS的转译代码，此时JS模块依然可以用const MyClass = require('./MyClass');直接导入。

方案3：命名导出+CommonJS导出别名 #

若需同时支持ES模块和CommonJS导入，可采用命名导出结合module.exports的方式：

// MyClass.ts
export class MyClass {
  // ...
}
module.exports = MyClass;

这样既保留了ES模块的命名导出能力，又让CommonJS的require可以直接获取到类。

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