Angular开发遇TS2322：类型'IEvent|undefined'不可分配给类型'IEvent'

报错原因 #

Array.prototype.find() 方法在数组中找不到匹配元素时会返回 undefined，而你声明 getEvent() 方法的返回值类型为严格的 IEvent，不允许 undefined 类型，因此 TypeScript 抛出类型不匹配的错误。

解决方案 #

可以根据你的业务场景选择以下任意一种方案：

• 方案1：调整返回值类型，明确允许返回空
  将返回值类型修改为 IEvent | undefined，显式告知调用方该方法可能返回空值，需要自行处理空的情况：

getEvent(id: number): IEvent | undefined {
  return EVENTS.find(event => event.id === id)
}

• 方案2：使用非空断言（仅适合确定id一定存在的场景）
  如果你能保证所有传入的id都一定能在EVENTS数组中找到对应项，可以在find()方法后加非空断言操作符!，告诉TypeScript你确定该调用不会返回undefined：

getEvent(id: number): IEvent {
  // ! 表示开发者保证此处一定有返回值，跳过TS的空值校验
  return EVENTS.find(event => event.id === id)!
}

注意：该方案仅适用于你100%确定id合法的场景，如果实际运行时出现不存在的id，会导致后续逻辑拿到undefined引发运行时报错。

• 方案3：空值兜底，保证永远返回IEvent类型
  对find()的结果做判断，找不到对应事件时抛出明确错误或者返回默认的IEvent对象，确保返回值永远符合IEvent类型：

getEvent(id: number): IEvent {
  const event = EVENTS.find(event => event.id === id)
  if (!event) {
    // 方式1：抛出自定义错误，上层调用可以用try catch捕获处理
    throw new Error(`ID为${id}的事件不存在`)
    // 方式2：返回默认IEvent对象，适合不需要抛错的场景
    // return { id: 0, name: '未知事件', ...其他默认属性 } as IEvent
  }
  return event
}

• 方案4：和getEvents保持风格，返回Observable类型
  如果你的服务都是响应式风格，可以把该方法也改成返回Observable<IEvent>，匹配Angular服务的常用写法：

import { of, throwError } from 'rxjs'

// ...其他代码
getEvent(id: number): Observable<IEvent> {
  const event = EVENTS.find(event => event.id === id)
  return event ? of(event) : throwError(() => new Error(`ID为${id}的事件不存在`))
}

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