TypeScript可选函数props调用提示可能为undefined的解决方法

当前代码需要满足两个约束：一是通用编辑弹窗需要复用于course、goal两类业务场景，不能强制传递单场景专属的保存回调；二是组件内部调用标记为可选的函数类型Props时，TS会因值可能为undefined抛出“表达式不可调用”的类型错误。可根据代码改动量选择以下适配方案：

方案1：调用前补充存在性判断 #

改动量最小，直接在函数调用位置加类型守卫即可：

// course场景保存逻辑
if (props.type === 'course' && props.onSaveCourse) {
  props.onSaveCourse(title, date)
}
// goal场景保存逻辑
if (props.type === 'goal' && props.onSaveGoal) {
  props.onSaveGoal(text)
}

TS的类型守卫在判断回调存在时，会自动将其类型从函数类型 | undefined收窄为确定的可调用函数类型，直接消除类型报错。结合type字段的分支判断，可完全匹配两个业务场景的调用逻辑，不会出现跨场景误调用的问题。

方案2：用可选链语法简化调用 #

如果不想写冗余的if判断，可在调用位置加可选链操作符?.：

// course场景调用
props.onSaveCourse?.(title, date)
// goal场景调用
props.onSaveGoal?.(text)

该语法会在回调为undefined时直接短路跳过调用，不会触发实际执行逻辑，TS会自动识别语法的类型收窄规则，不会抛出不可调用的报错，代码写法更简洁。

注意：不要直接用@ts-ignore压制调用位置的报错，这种写法会跳过所有类型校验，后续如果回调未传递导致运行时错误，问题定位成本会非常高。

进阶优化：基于可辨识联合重构Props定义 #

如果希望从类型定义层面完全避免无效传参、减少内部冗余的类型判断逻辑，可将原本平铺的Props定义调整为按type字段区分的可辨识联合类型：

type EditModalProps = 
  | {
      type: 'course'
      onSaveCourse: (title: string, date: Date) => void
    }
  | {
      type: 'goal'
      onSaveGoal: (text: string) => void
    }

重构后TS可根据type值直接匹配对应场景存在的回调类型，不存在的字段会在调用侧被TS直接拦截提示，组件内部也不需要反复判断回调是否为undefined，从根源上消除类型不匹配的问题。

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