为Webpack构建的JavaScript库添加TypeScript声明遇阻求助

我之前也碰到过类似的情况，给你梳理几个关键步骤，应该能搞定这个类型声明不被其他项目识别的问题：

• 检查package.json的类型配置
  这是最容易忽略的点！之前纯JS包可能靠根目录的index.d.ts自动被识别，但用Webpack打包后，必须在package.json里明确指定类型文件的位置。比如你的Webpack输出文件在dist目录，那要加上：

  {
    "main": "./dist/your-bundle.js",
    "types": "./dist/index.d.ts" // 若类型文件仍在根目录，则写"./index.d.ts"
  }
  

• 确保类型文件被包含在npm发布包中
  检查你的.gitignore和.npmignore文件，别把index.d.ts或者dist目录排除了。更稳妥的方式是在package.json里用files字段明确列出要发布的文件：

  {
    "files": ["dist", "index.d.ts", "package.json"]
  }
  

  这样能保证Webpack打包后的产物和类型声明文件都能被正确上传到npm。

• Webpack配置的细节处理
  类型声明文件.d.ts不需要被Webpack编译，所以要在配置里排除对它的处理：

  module.exports = {
    // ...其他配置
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: [/node_modules/, /\.d\.ts$/], // 排除.d.ts文件
          use: "babel-loader" // 或者你使用的其他JS编译loader
        }
      ]
    }
  };
  

  如果想让类型文件和打包产物放在同一目录，可以用copy-webpack-plugin把根目录的index.d.ts复制到dist文件夹，结构会更统一。

• 本地测试验证
  用npm link把你的包链接到一个测试项目中，然后去测试项目的node_modules/你的包名下检查：

  • 是否存在index.d.ts文件（或dist目录下是否有）
  • package.json里的types路径是否指向正确的文件
    有时候本地开发时路径配置错误，会导致TypeScript找不到类型声明。

• 确保类型声明和JS导出匹配
  手动写的index.d.ts要和你JS代码的导出结构完全对应。比如你的JS里导出：

  module.exports = {
    greet: function(name) {
      return `Hello ${name}`;
    }
  };
  

  那你的类型声明应该写：

  export function greet(name: string): string;
  

  如果结构不匹配，TypeScript也会无法正确识别类型。

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