TypeScript类型声明文件与CommonJS模块语法不兼容如何解决？

你的类型声明与实际JS代码的导出规范不匹配：

• JS代码使用CommonJS规范的module.exports = person直接导出整个person对象
• 类型声明使用ES模块规范的export default person声明默认导出，TypeScript处理CommonJS的require导入时，会默认将ES模块的默认导出挂载到导入对象的default属性下，因此出现类型要求加.default、但运行时不存在该属性的错位问题。
  ES模块导入时正常的原因是：import person from './index'语法会自动读取ES模块声明的default导出，和你的类型声明逻辑对齐。

方案1：修改类型声明适配CommonJS导出（推荐，无需修改现有JS运行逻辑） #

将index.d.ts最后的export default person替换为TypeScript专为CommonJS导出设计的export =语法：

declare type predicate = (v: unknown) => boolean;
declare function talk(speech: string): void;

declare const person: {
  names: {
    [key: string]: string;
  };
  state: {
    [key: string]: predicate;
  };
  talk: typeof talk;
};

export = person;

修改后，require('./index')导入的对象类型会直接匹配person的类型定义，无需加.default即可正常触发智能提示，且和运行时逻辑完全一致。

方案2：修改JS代码适配ES模块导出 #

如果后续计划全量切换ES模块规范，可以调整JS代码导出逻辑：

1. 将index.js中的module.exports = person替换为export default person
2. 在项目根目录的package.json中添加配置"type": "module"
   修改后CommonJS的require语法将无法使用，所有导入都需要用ES模块的import语法，和现有类型声明完全匹配。

可选兼容配置 #

如果需要同时兼容两种导入方式，可以在项目的tsconfig.json中开启配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

开启后TypeScript会自动处理ES模块默认导出和CommonJS导入的转换，减少两种规范混用的错位问题。

内容的提问来源于stack exchange，提问作者h-sifat