如何使用JSDoc为包含动态键的对象提供intellisense智能提示

你可以通过 JSDoc 的索引签名类型结合自定义类型定义实现智能提示，具体实现方式如下：

步骤1：定义基础元素类型 #

首先定义数组中每个对象的结构：

/**
 * 单个路由配置项类型
 * @typedef {Object} RouteItem
 * @property {string} method - 请求方法字段
 * @property {string} name - 路由名称字段
 */

步骤2：定义动态键外层对象类型 #

使用Object<string, ValueType>语法定义键为任意字符串、值为指定类型的对象结构：

/**
 * 路由配置集合类型
 * 键为任意字符串，值为RouteItem类型的数组
 * @typedef {Object<string, RouteItem[]>} RouteConfig
 */

如果你习惯TypeScript的类型语法，也可以把Object<string, RouteItem[]>替换为Record<string, RouteItem[]>，两者效果完全一致。

步骤3：给目标变量添加类型注解 #

给你的对象加上上面定义的类型即可获得智能提示：

/** @type {RouteConfig} */
const object = {
    healthcheck: [
        { method: 'get', name: 'test' }
    ],
    users: [
        { method: 'get', name: 'auth' }
    ],
};

简化写法（无需抽离类型） #

如果不需要复用类型，也可以直接把类型写在变量注解中：

/** @type {Object<string, Array<{method: string, name: string}>>} */
const object = {
    // 你的对象内容
};

配置完成后，编辑器会自动提示数组元素的method和name属性，新增属性时也会做类型校验。

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