TypeScript中如何从动态字符串数组创建类型别名（Type Alias）

你写的写法报错是因为TypeScript 的类型系统仅在编译阶段生效，你调用的map、join都是 JavaScript 运行时方法，无法用来生成编译期的类型定义，且运行时的变量默认不会进入类型空间，才会触发命名空间找不到的报错。

解决方案 #

步骤1：给menus数组添加const断言

首先要让TypeScript能识别到menus里name字段的字面量类型，而不是推导为宽泛的string类型，需要用as const把数组标记为只读字面量常量：

const menus = [
    {
        name: 'menu1',
        collapse: true,
    },
    {
        name: 'menu2',
        collapse: false,
    },
] as const;

步骤2：从menus的类型中提取name的联合类型

用typeof拿到menus的编译期类型，再通过索引访问提取所有name字段的联合类型：

type MenuName = typeof menus[number]['name'];
// 此时MenuName的类型等价于 'menu1' | 'menu2'

可选优化：自动生成初始menuState

还可以直接从menus数组生成初始状态，避免重复硬编码菜单键：

const [menuState, setMenuState] = useState<Record<MenuName, boolean>>(
  menus.reduce((prev, curr) => {
    prev[curr.name] = curr.collapse;
    return prev;
  }, {} as Record<MenuName, boolean>)
);

后续渲染SubMenu也可以直接遍历menus生成，不需要手动写多个组件：

{menus.map(menu => (
  <SubMenu 
    key={menu.name}
    handleToggle={() => handleToggle(menu.name)} 
    name={menu.name} 
  />
))}

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