使用package.json的exports字段替代main时，如何配置types字段？

当你用exports字段替代main来配置多入口的TypeScript NPM包时，每个入口对应的.d.ts类型文件可以直接在exports的各入口配置项中通过types（或等价的typings）字段指定，完全贴合exports的结构来映射。

核心配置示例 #

假设你的包有主入口和一个utils子入口，同时兼容ES模块和CommonJS，配置如下：

{
  "name": "your-package",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./utils": {
      "import": "./dist/utils.js",
      "require": "./dist/utils.cjs",
      "types": "./dist/utils.d.ts"
    }
  },
  // 可选：兼容不支持exports字段的旧版工具链
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

关键说明 #

• 每个exports的入口对象里，types字段直接指向对应入口的类型声明文件，TypeScript会自动关联对应JS文件的类型
• 如果某个入口不需要区分模块规范（只有单一JS文件），可以简化配置：

{
  "exports": {
    ".": {
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./hooks": {
      "default": "./dist/hooks.js",
      "types": "./dist/hooks.d.ts"
    }
  }
}

• 必须确保tsconfig.json中启用了declaration: true，这样TypeScript编译时才会生成对应的.d.ts文件
• 类型文件的路径要和exports中配置的JS文件路径对应，避免出现类型找不到的问题

特殊场景：条件导出的类型配置 #

如果有基于环境的条件导出（比如Node.js和浏览器环境区分），同样在对应的条件分支里添加types字段：

{
  "exports": {
    ".": {
      "node": "./dist/node/index.js",
      "browser": "./dist/browser/index.js",
      "types": "./dist/index.d.ts"
    }
  }
}

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