TypeScript中使用redux-mock-store默认导入调用失败问题求助

你遇到的这个问题其实是模块导出方式和 TypeScript 类型定义不匹配导致的，咱们一步步拆解原因和解决方案：

问题根源 #

redux-mock-store 的实际源码是用 CommonJS 规范导出的（类似 module.exports = createStore），但你安装的 @types/redux-mock-store 类型定义里写的是 export default createStore。

• 当你用 import createStore from 'redux-mock-store' 时，TypeScript 编译阶段会按照类型定义的默认导入逻辑处理，不会报错；但运行时，Node.js 或浏览器的模块解析器会把 CommonJS 的导出当成一个完整的模块对象，此时你拿到的 createStore 其实是 { default: 真正的createStore函数 }，自然会抛出“redux_mock_store1.default is not a function”的错误。
• 而用 import * as createStore from 'redux-mock-store' 时，你直接拿到了整个模块对象，由于 CommonJS 模块的 module.exports 本身就是那个创建 store 的函数，所以调用 createStore() 时能正常执行。

可行的解决方案 #

方案1：继续使用命名空间导入（已验证有效） #

可以给导入的模块起个更语义化的名字，让代码更清晰：

import * as mockStore from 'redux-mock-store';

// 使用示例
const store = mockStore();

方案2：开启 TypeScript 的模块互操作性配置 #

如果你更偏好默认导入的写法，可以在 tsconfig.json 里添加以下配置，让 TypeScript 自动处理 CommonJS 和 ES 模块的导出差异：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true // 开启esModuleInterop后会自动启用这个配置
  }
}

开启后，你就能用 import createStore from 'redux-mock-store' 正常导入并调用函数了。

补充说明 #

这是 TypeScript 处理第三方模块时的常见坑——当库的实际导出规范和类型定义的导出声明不一致时，就会出现编译正常但运行报错的情况。esModuleInterop 就是 TypeScript 为了抹平 CommonJS 和 ES 模块差异推出的配置，开启后默认导入的行为会更符合直觉。

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