类型“未定义”不能用作索引类型。打字稿答案

【问题标题】：Type 'undefined' cannot be used as an index type. Typescript类型“未定义”不能用作索引类型。打字稿
【发布时间】：2022-01-19 17:36:52
【问题描述】：

在这里做一个项目。我正在使用 Nextjs 和 Typescript。我有选项卡，在一个选项卡中，我通过了很多对象，我创建了一个 reduce 函数来对所有内容进行排序并将其推送到适当的类别中。我遇到了这个问题

类型“未定义”不能用作索引类型。

特别是在reduce函数内部的每个title（此处用cmets标记）下。

界面：

export interface ITimelineItem {
  title?: string
  subtitle?: string
  date?: string
  reference?: string
  description?: string
  skillSet?: string
  reverse?: boolean
  startYear?: string
  endYear?: string
}

interface ITimeline {
  items?: ITimelineItem[]
}

const TimeLine: React.FC<ITimeline> = ({ items = [] }) => {
  const classes = useStyles()

  const cat = items.reduce((item, { skillSet, title }) => {
    if (!item[title!]) item[title] = []
    //        ^^^^^        ^^^^^
    item[title].push(skillSet)
    //   ^^^^^

    return item
  }, {})
}

【问题讨论】：

您的示例充满了语法错误。请提供一个可重现的。另外，请考虑格式化。尝试使用ts playground
请...即使我们尝试修复编译器错误，给定的代码也不完整并且存在逻辑错误。请提供完整的功能，或者至少去掉不必要的部分。

标签： javascript typescript next.js

【解决方案1】：

由于在ITimelineItemtitle中标记为可选，所以可以是undefined，不能用于索引对象。要修复它，请在将其用作索引之前添加对 title 的检查。

if (title !== undefined && !item[title]) item[title] = []

你也可以在这里使用非空断言操作符，但是如果title实际上是undefined，代码就会中断，这基本上违背了这里TS的目的。

if (!item[title!]) item[title] = []

【讨论】：

【解决方案2】：

这表示您不能使用title 作为item[**title**] 中的索引值，因为title 可能不存在。要解决此问题，您可以使用Non-null Assertion operator !。

【讨论】：

任何建议我需要添加“！”？以前没用过
这可能不是一个好主意，因为它只是“关闭警告灯”，而不是解决问题。 ITimelineItem 将 title 定义为可选 (title?)，因此它实际上可能是 undefined。正确的解决方案是添加一个检查以不同方式处理案例title === undefined。