TypeScript中使用&&判断可选函数真值后仍提示undefined问题

问题解答 #

这个现象的核心原因是TypeScript 的控制流类型收窄规则不会作用于异步/延迟执行的回调函数：

• 你在组件渲染的同步流程里用props.function &&做的存在性校验，只会把当前同步上下文中props.function的类型从Function | undefined收窄为Function，这个收窄结果仅在当前同步执行栈有效。
• onClick回调是未来用户触发点击时才会执行的延迟逻辑，TS 静态分析时不会默认回调执行时props.function的值和渲染时一致：从语法层面完全存在「渲染时props.function存在、点击前该属性被修改为undefined」的可能性，因此渲染阶段的类型收窄结果不能沿用到回调内部，自然会提示可能为undefined。

而props.label的校验生效是因为它的取值逻辑就在同步渲染流程里，值当场确定不会后续变动，所以一次校验就足够。

更简洁的替代写法 #

除了在回调内部二次校验，你也可以用两种更清爽的写法规避报错：

1. 先把目标属性赋值给本地不可变变量，TS 会识别到该变量的值不会再变更，之前的收窄结果可复用：

import React from "react";

interface PropsModel {
    label?: string
    function?: Function,
}

function test(props: PropsModel) {
    // 赋值给本地常量
    const callback = props.function
    return (
        <div>
            {props.label && <p>{props.label}</p>}
            {callback && <button onClick={() => callback()}>Dummy button</button>}
        </div>
    )
}

2. 直接使用可选调用运算符?.，不需要额外判断：

function test(props: PropsModel) {
    return (
        <div>
            {props.label && <p>{props.label}</p>}
            {props.function && <button onClick={() => props.function?.()}>Dummy button</button>}
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Sean A.S. Mengis