已发布的npm包无法显示函数参数提示，如何解决？

问题核心是Babel编译过程中剥离了类型相关信息，导致其他项目使用时编辑器无法识别函数参数类型，只能显示Any。以下是几种可行的解决方案：

方案一：用JSDoc保留类型提示（无需TypeScript） #

给函数添加标准JSDoc注释，明确参数类型，编辑器会直接读取这些注释提供提示：

/**
 * 创建盒子元素
 * @param {Object} options 配置参数
 * @param {string} options.id 盒子的唯一ID
 * @param {number} options.width 盒子的宽度（单位通常为px）
 */
const createBox = ({id, width}) => {
  // 函数逻辑
}

然后修改Babel配置，确保生产编译时保留JSDoc注释：
在babel.config.json中添加全局comments配置：

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }
        ],
        "@babel/preset-react"
    ],
    "comments": true
}

方案二：使用TypeScript生成类型声明文件（最可靠） #

通过TypeScript生成.d.ts类型声明文件，这是目前社区推荐的方式：

1. 安装TypeScript和Babel的TS预设：

npm install typescript @babel/preset-typescript --save-dev

2. 将utils模块改为TypeScript文件（比如utils.ts），定义参数类型：

interface CreateBoxOptions {
  id: string;
  width: number;
}

export const createBox = ({id, width}: CreateBoxOptions) => {
  // 函数逻辑
}

3. 修改babel.config.json，添加TS预设：

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

4. 新建tsconfig.json，开启类型声明生成：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "dist",
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/lib/**/*"],
  "exclude": ["node_modules", "__tests__"]
}

5. 更新build命令，先生成类型声明再编译：

"build": "cross-env NODE_ENV=production tsc && babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"

6. 在package.json中指定类型声明入口：

{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": ["dist"]
}

方案三：手动编写类型声明文件 #

如果不想引入TypeScript，可手动编写.d.ts文件：

1. 在src/lib下创建utils.d.ts：

export interface CreateBoxOptions {
  id: string;
  width: number;
}

export declare const createBox: (options: CreateBoxOptions) => void;

2. 确保build命令将.d.ts文件复制到dist目录（当前的--copy-files已包含，无需额外修改，但要确认未被ignore）。

3. 在package.json中指定types字段指向dist中的声明文件。

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