npm安装组件库时未下载.d.ts类型声明文件该如何解决

问题根因 #

你打出的npm包缺失.d.ts的核心原因是构建流程没有自动生成类型声明文件到dist目录，你配置的files: ["./dist"]只会把dist目录下已存在的文件打进包里，当前webpack构建只会生成index.js，没有触发tsc生成.d.ts的流程。 #

修复步骤 #

• 第一步：检查并修改tsconfig.json配置，开启声明文件生成能力
  确保你的tsconfig.json中存在以下配置：

{
  "compilerOptions": {
    // 开启生成.d.ts声明文件
    "declaration": true,
    // 声明文件输出到dist目录，和js产物保持一致
    "outDir": "./dist",
    // 其他原有配置保持不变，比如target、module、jsx相关配置等
  },
  // 包含所有源码文件，确保所有组件的声明都能被生成
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

• 第二步：修改package.json中的build脚本，把生成声明的逻辑加入构建流程
  你当前的build脚本只执行了webpack打包，没有触发tsc生成声明，修改scripts如下：

{
  "scripts": {
    // --emitDeclarationOnly参数表示只生成.d.ts文件，不编译输出js文件（避免和webpack的ts-loader重复编译）
    "build": "webpack && tsc --emitDeclarationOnly"
  }
}

• 第三步：排查忽略文件规则（可选）
  检查项目根目录下的.npmignore或者.gitignore文件，确认没有配置*.d.ts、dist/*.d.ts这类会过滤掉声明文件的规则，如果存在删除对应规则即可。

验证方法 #

1. 执行npm run build，查看dist目录下是否已经生成了index.d.ts以及其他需要的类型声明文件
2. 执行npm pack，解压生成的tgz包，确认dist目录下已经包含所有.d.ts文件，再发布到npm即可。

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