TypeScript报错：子组件中无法调用可能为'undefined'的函数如何解决？

错误原因 #

你在ISliderProps中将getCardType定义为可选属性，TypeScript无法确定嵌套传递后该属性是否存在，因此调用时会抛出类型错误。

修复方案 #

有三种常用修复方式，可根据业务场景选择：

• 方案1：调整属性为必传（推荐，若该属性业务上必须传递）
  直接删除ISliderProps中getCardType后的可选标记?即可：

// 修改前
readonly getCardType?: (type: ECardType) => void;
// 修改后
readonly getCardType: (type: ECardType) => void;

如果Slider组件本身存在不传getCardType的使用场景，可选择下面两种方案。

• 方案2：调用时添加可选链运算符
  在子组件调用getCardType的位置添加?.，当属性为undefined时会自动终止执行，不会抛出运行时错误：

useEffect(() => {
  getCardType?.(cardType);
}, [cardType]);

• 方案3：解构时添加默认空函数
  在Slider或者SliderCardItem组件解构props时，给getCardType设置默认的空函数，TypeScript会自动识别该属性永远为函数类型：

// Slider组件内解构时添加默认值
const Slider: React.FunctionComponent<ISliderProps> = ({
  data,
  autoPlay,
  getCardType = () => {},
}) => {/* 组件逻辑 */}

// 或者在SliderCardItem组件内解构时添加默认值
const SliderCardItem = ({ cardItem, index, getCardType = () => {} }) => {/* 组件逻辑 */}

内容的提问来源于stack exchange，提问作者E.D