typescript - 如何管理 Typescript 中未定义的返回类型？

Question

抱歉，我是 Typescript 的新手，需要在过滤后将 prop 传递给组件，为此我定义了一个简单的过滤方法。我收到编译错误，提示 'Type 'IMilestone[] | undefined' 不可分配给类型 'IMilestone[]'

 const milestonesOfActiveGroup = ():IMilestone[] => {
    return studyProgress?.groups.filter((group:IGroup) => group.name === activeGroup)[0].milestones
  }

因为我获取并填充了 studyProgress，所以它可以是未定义的。定义此方法的正确方法是什么？

Answer 1

您在 studyProgress 上使用了可选链接，这意味着该变量可能是 null 或 undefined。在长形式中，您的函数执行此操作:

const milestonesOfActiveGroup = (): IMilestone[] => {
  if (studyGroup) {
    return studyProgress.groups.filter(
      (group: IGroup) => group.name === activeGroup)[0].milestones
    )
  } else { 
    return undefined // this does not match the declared return type
  }
}

因此，如果 studyGroup 不存在，您将无法深入研究它，而是返回 undefined。

要处理这种情况，您有几种选择。这是两个。

允许函数返回undefined

const milestonesOfActiveGroup = (): IMilestone[] | undefined => {

或者如果 studyProgress 真的应该存在则抛出一个错误，如果它不存在，那么它应该被认为是一个错误。

const milestonesOfActiveGroup = (): IMilestone[] => {
  if (!studyProgress) throw new Error("studyGroup has no value!")
  // typescript knows that studyProgress must exist from here on.
  return studyProgress.groups.filter((group:IGroup) => group.name === activeGroup)[0].milestones)
}

---

想想当 studyProgress 没有设置值时意味着什么，以及在这种情况下您的程序应该做什么。然后处理这种情况，typescript 应该会给你一个绿灯。