TypeScript中如何为map遍历解构出的数组元素指定interface类型

问题根因 #

你定义的Mapped是带group、items属性的对象结构，但Object.entries()的返回值是[键, 值]格式的元组数组，解构得到的[group, items]是两个独立的变量，并非符合Mapped结构的对象，所以直接绑定类型会报错，和外层数组无关。

正确写法 #

方案1：给原始对象定义类型（推荐，自动推导无需手动声明） #

先明确你的原始items对象的类型，TS会自动推导出解构后两个变量的类型：

// 单条item的结构
interface MappedItem {
  item: string;
}
// 原始items对象的类型：键是分组名，值是对应分组的item数组
type ItemsSource = Record<string, MappedItem[]>

// 给你的items变量绑定类型
const items: ItemsSource = {
  // 你的原始数据
}

return (
<Container>
  {/* 这里解构的group自动推导为string，items自动推导为MappedItem[] */}
  {Object.entries(items).map(([group, items], i) => (
    <div>
      {/* <ul>{Icons[group]}</ul> */}
      {items.map(item => (
        <span>{item.item}</span>
      ))}
    </div>
  ))}
</Container>
)

方案2：如果你必须使用已定义的Mapped接口 #

可以在map回调内将解构得到的两个值组装为符合Mapped结构的对象再绑定类型：

interface Mapped {
  group: string;
  items: { item: string}[];
}

const items: Record<string, { item: string }[]> = {/* 你的原始数据 */}

return (
<Container>
  {Object.entries(items).map(([group, items], i) => {
    // 组装为符合Mapped结构的对象
    const mappedItem: Mapped = { group, items }
    return (
      <div>
        {/* <ul>{Icons[mappedItem.group]}</ul> */}
        {mappedItem.items.map(item => (
          <span>{item.item}</span>
        ))}
      </div>
    )
  })}
</Container>
)

额外注意 #

你原有代码存在两处语法问题：

• Object.entries(items))多写了一个右括号
• 内层map的参数名写为itmes，后续调用时用的是item，变量名不匹配

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