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

抱歉，我是 Typescript 新手，需要在过滤后将 prop 传递给组件，为此我定义了一个简单的过滤方法。我遇到编译错误，提示 'Type 'IMilestone[] | undefined' is not assignable to type 'IMilestone[]'

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

由于我获取并填充了 studyProgress，它可能是未定义的，对吧？定义这个方法的正确方式是什么？

答案＃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 就会给你绿灯。

答案＃2

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

你声明了“如果 studyProgress 是 undefined 或 null，则返回 undefined”（studyProgress?），所以你应该用 undefined 来声明返回类型（IMilestone[] | null）。| 是联合类型，表示“它将返回 IMilestone[] 或 undefined”。