如何配置TypeScript npm包以支持自定义子路径导入？

1. 修正TypeScript编译配置（tsconfig.json） #

当前declarationDir配置会将类型声明统一输出到dist/types目录，和你实际的文件结构不匹配，会导致类型路径识别错误。需要调整该配置：

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": true,
    // 修改declarationDir，让类型文件与JS文件同目录，或直接移除该字段（TypeScript默认行为）
    "declarationDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. 完善package.json的导出配置 #

需要在exports字段中为子路径同时指定JS入口和类型声明入口，确保TypeScript能正确识别子路径的类型：

{
  "name": "@mypackage/name",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts", // 保留根路径类型配置，兼容旧版TypeScript
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.js",
      "import": "./dist/index.js"
    },
    "./utils": {
      "types": "./dist/utils/index.d.ts",
      "require": "./dist/utils/index.js",
      "import": "./dist/utils/index.js"
    }
  },
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "files": [
    "dist/**/*"
  ],
  "devDependencies": {
    "typescript": "^4.3.2"
  }
}

3. 确保源码导出正确 #

确认src/utils/index.ts中正确导出目标函数：

// src/utils/index.ts
export function UtilityFunction() {
  // 函数逻辑
}

验证效果 #

重新执行npm run build后，发布包或本地link测试，用户即可通过以下方式导入：

import { UtilityFunction } from '@mypackage/name/utils';

此时TypeScript会自动读取dist/utils/index.d.ts中的类型声明，不会出现模块或类型找不到的错误。

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