JavaScript中如何嵌套模拟命名参数并保留VS Code提示？

一、保留VS Code智能提示的方案（推荐） #

要同时实现嵌套命名参数结构和VS Code的参数提示，核心是用JSDoc类型注解配合参数解构，给必填项和可选配置明确标注类型。这样VS Code能识别参数结构，调用时自动提示：

/**
 * 创建DOM元素并追加到指定父元素
 * @param {Object} params - 总参数对象
 * @param {string} params.tagName - 必填：要创建的元素标签名（如'div'、'p'）
 * @param {HTMLElement} params.parent - 必填：元素要追加到的父容器
 * @param {Object} [params.options] - 可选配置项（不传则使用默认值）
 * @param {string} [params.options.className] - 可选：元素的类名
 * @param {Record<string, string>} [params.options.attributes] - 可选：元素的属性键值对
 * @param {string} [params.options.textContent] - 可选：元素的文本内容
 */
function createDOMElement({ tagName, parent, options = {} }) {
  // 校验必填参数
  if (!tagName || !parent) {
    throw new Error('tagName 和 parent 为必填参数');
  }

  // 解构可选配置，给默认值避免undefined
  const { className, attributes = {}, textContent = '' } = options;
  const element = document.createElement(tagName);

  // 应用类名
  if (className) {
    element.className = className;
  }

  // 应用属性
  Object.entries(attributes).forEach(([key, value]) => {
    element.setAttribute(key, value);
  });

  // 设置文本内容
  element.textContent = textContent;

  // 追加到父元素
  parent.appendChild(element);

  return element;
}

调用时，VS Code会自动提示tagName、parent和options下的子项，同时options不传也不会报错（因为设置了默认空对象）。

二、仅实现功能的简化方案（无强提示） #

如果不需要严格的VS Code提示，只想快速实现嵌套命名参数结构，可以直接用嵌套解构，但必须给options设置默认空对象，避免解构时出现undefined报错：

function createDOMElement({ tagName, parent, options: { className, attributes = {}, textContent = '' } = {} }) {
  // 校验必填项
  if (!tagName || !parent) {
    throw new Error('tagName 和 parent 为必填参数');
  }

  const element = document.createElement(tagName);

  // 应用配置
  if (className) element.className = className;
  Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
  element.textContent = textContent;

  parent.appendChild(element);
  return element;
}

这种写法功能正常，但VS Code无法识别options下的子参数提示，适合快速开发场景。

关键说明 #

你之前遇到options未定义的问题，本质是没有给options设置默认值——当调用函数不传options时，解构的options是undefined，再解构它的子属性就会报错。给options = {}或者嵌套解构时加= {}就能解决这个问题。

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