基于TypeScript的嵌套菜单选项递归实现方案求助

问题分析 #

你的代码核心问题在于：

• 递归逻辑缺失：additionalOptionInfo仅处理当前层级选项，未递归遍历子选项的options数组
• 类型匹配错误：直接将原optionItem.options（数组类型）赋值为Map，不符合类型定义
• 未返回最终结果：主函数未输出组装好的MenuResult对象
• 无效项未处理：未过滤示例中无optionId的无效子选项

修正后的代码 #

type MenuInfo = {
  menuId: string,
  menuType: string,
  options: Array<Option>
}

type Option = {
  optionId: string,
  type: string,
  options?: Array<Option>
}

type MenuResult ={
  menuId: string,
  menuType: string,
  options: Map<string, Option>
}

function makeMenuResult(menuJson: string): MenuResult {
  const menu: MenuInfo = JSON.parse(menuJson);
  return {
    menuId: menu.menuId,
    menuType: menu.menuType,
    options: convertOptionsToMap(menu.options)
  };
}

// 递归处理任意层级的Option数组，转换为Map结构
function convertOptionsToMap(optionsArray: Array<Option>): Map<string, Option> {
  const optionsMap = new Map<string, Option>();

  for (const item of optionsArray) {
    // 跳过无optionId的无效选项
    if (!item.optionId) continue;

    // 复制基础字段，准备转换子选项
    const convertedOption: Option = {
      optionId: item.optionId,
      type: item.type
    };

    // 递归处理子选项数组，转为Map后赋值
    if (item.options && item.options.length > 0) {
      convertedOption.options = convertOptionsToMap(item.options);
    }

    optionsMap.set(convertedOption.optionId, convertedOption);
  }

  return optionsMap;
}

关键说明 #

1. 递归核心函数：convertOptionsToMap是处理嵌套结构的核心，它会：
   • 遍历输入的Option数组，过滤无optionId的无效项
   • 复制每个Option的基础字段，然后递归处理其options子数组，将结果转为Map后赋值给当前Option的options属性
   • 将处理后的Option存入Map，键为optionId
2. 主函数简化：仅负责解析JSON并组装最终的MenuResult对象，逻辑清晰
3. 类型合规：严格遵循TypeScript类型定义，确保转换后的结构完全符合MenuResult要求

示例转换结果 #

针对你提供的示例JSON，转换后的MenuResult结构（简化展示）：

{
  menuId: "britanny-tavern-menu",
  menuType: "drinks",
  options: Map([
    ["beverages", {
      optionId: "beverages",
      type: "hot-options-1",
      options: Map([
        ["herbal", {
          optionId: "herbal",
          type: "exotic",
          options: Map([
            ["green-tea", { optionId: "green-tea", type: "medicinal" }],
            ["darjeeling", { optionId: "darjeeling", type: "tea-bags" }]
          ])
        }]
      ])
    }]
  ])
}

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