如何将JavaScript的module.exports结构正确改写为TypeScript写法

你之前的写法用export default导出了一个包含query、mutation属性的整体对象。ES模块规范中，import { xxx } from 'xxx'语法是读取模块的命名导出成员，不会去解析默认导出对象的内部属性，所以自然拿不到query。
这种默认导出的写法如果要访问内部属性，必须先导入整个默认对象再解构，也就是你说的“需要导入整个模块”的情况：

import moduleObj from './module'
const { query } = moduleObj

要支持按需直接导入对应成员、无需引入整个模块，聚合索引文件（即你说的index文件）直接使用命名重导出语法即可，这也是ES/TS模块下聚合导出的标准写法：

export { query } from './query'
export { mutation } from './mutation'

该写法不需要先单独引入子模块再导出，代码更简洁，同时天然支持tree-shaking，打包时不会引入未使用的成员。
修改后就可以直接用你期望的方式导入：

// 单独导入query，不会引入mutation相关代码
import { query } from './module'

// 也可以按需同时导入多个成员
import { query, mutation } from './module'

这个写法对原有CommonJS风格的导入也完全兼容，老代码里的const { query } = require('./module')不需要做任何修改就能正常运行。

如果有场景需要一次性导入所有成员（比如全局注册），可以在命名导出的基础上额外增加默认导出，两种导入模式可以共存：

import { query } from './query'
import { mutation } from './mutation'

// 命名导出，支持按需引入
export { query, mutation }
// 默认导出全量对象，支持整包导入
export default { query, mutation }

此时两种导入写法都能正常生效：

// 按需引入
import { query } from './module'
// 全量引入
import allModule from './module'

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