如何为自定义对象动态属性配置JSDOC以获取VSCode自动提示？

要实现动态键名且值为FormField类型的自动提示，你需要使用JSDOC支持的索引签名语法，而非*通配符。以下是两种可行的配置方案：

方案1：使用Record类型（推荐） #

直接通过Record<string, FormField>定义键为任意字符串、值为FormField的对象，这是TypeScript风格的语法，VSCode和JSDOC都能完美识别：

/**
 * @typedef {Object} FormField
 * @property {string} initialValue - 字段初始值
 * @property {string} type - 字段类型
 * @property {function} validate - 字段验证函数
 * @property {string} errorMessage - 输入错误时显示的提示信息
 * ... TODO add more here later ...
 */

/**
 * @typedef {Record<string, FormField>} Data
 * 键为任意字符串，值必须是FormField类型的对象
 */

/**
 * @typedef {Object} Item
 * @property {string} [title] - 输入字段上方显示的标题（可选）
 * @property {string} [className] - 所有字段容器的类名
 * @property {Data} data - 用于生成表单的数据对象，可使用自动提示配置
 */

/**
 * @description 处理表单的自定义Hook
 * @param {Item[]} arr - 用于生成表单的Item对象数组
 * @return {Object} 包含表单状态、数据和操作函数的对象
 */

// 示例用法：
const form = useForm([
  {
    title: 'Test',
    className: 'test',
    data: {
      email: {initialValue: '', type: 'email', validate: value => isValidEmail(value), errorMessage: 'Invalid email address'},
      anyNameHere: {} // 现在输入时会自动提示initialValue、validate等FormField属性
    }
  }
]);

方案2：使用传统JSDOC索引签名 #

这是JSDOC原生的索引签名写法，同样被VSCode支持：

/**
 * @typedef {Object.<string, FormField>} Data
 * 键为任意字符串，值必须是FormField类型的对象
 */

原理说明 #

VSCode的JSDOC解析器不支持用*作为通配符定义动态属性，但完全支持索引签名语法：

• 两种写法都能强制约束：任意键名的对象，所有属性值必须为FormField类型
• 配置后，在编写data对象的任意属性时，VSCode会自动触发FormField的属性提示

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