TypeScript泛型优化：解决菜单按钮键动态类型推导与自动补全问题

你遇到的核心问题是泛型类型推导不够精确，导致option.name无法正确关联到对应菜单的按钮键集合。我们可以通过优化泛型约束和类型提取，让TypeScript准确识别每个菜单对应的按钮键，实现自动补全功能。

第一步：提取清晰的类型别名 #

先把localeJSON相关的类型提取出来，避免重复使用typeof，同时让类型关系更明确，帮助TypeScript更好地推导：

// 提取localeJSON的整体类型
type LocaleJSON = typeof localeJSON;
// 所有可用的菜单键类型（比如示例中的'main'）
type MenuKey = keyof LocaleJSON['menus'];
// 根据菜单键，动态获取对应的按钮键类型
type MenuButtonKeys<M extends MenuKey> = keyof LocaleJSON['menus'][M]['buttons'];

第二步：优化ISubmenu接口 #

调整ISubmenu接口，让它的泛型参数直接对应按钮键类型，避免模糊的泛型占位符：

export interface ISubmenu<ButtonKey extends string | number | symbol> { 
  name: ButtonKey; 
  template: MenuTemplate<Context>; 
}

第三步：改进createSubmenus的泛型定义 #

现在让createSubmenus的泛型参数明确关联到菜单键，并将options的类型严格绑定到该菜单对应的按钮键：

export const createSubmenus = <K extends MenuKey>(
  menuKey: K,
  options: Array<ISubmenu<MenuButtonKeys<K>>>
) => {
  const menuLocale = createMenuLocale(menuKey);
  const submenus = [];
  options.forEach((option) => {
    submenus.push({
      text: (context: Context) => menuLocale.getButton(context, option.name),
      action: 'chooseSphere', // 如果需要让action也关联按钮键，可改为option.name，类型会自动匹配
      template: option.template,
    });
  });
  return submenus;
};

优化后的效果说明 #

• 通过MenuButtonKeys<K>类型别名，TypeScript能明确推导：当你传入某个menuKey（比如'main'）时，options里的name只能是该菜单下存在的按钮键（chooseSphere、searchMaster等）。
• 类型别名的提取让泛型关系更清晰，TypeScript不再会把name推导为宽泛的string类型，而是精确的按钮键联合类型，自动补全和类型检查都会正常工作。

测试自动补全 #

当你调用createSubmenus时，TypeScript会根据传入的menuKey自动提示对应的按钮键：

// 传入'main'菜单时，name字段会自动补全main菜单的所有按钮键
createSubmenus('main', [
  {
    name: 'chooseSphere', // 自动补全，输入错误会触发TypeScript报错
    template: yourMenuTemplate
  }
]);

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