如何删除 TS2722：无法调用可能“未定义”的对象。错误？

Question

我有一个看起来像这样的功能

let bcInst;
if(props.onBoundsChanged){
    bcInst = kakao.maps.event.addListener(map, 'bounds_changed',()=>{
        props.onBoundsChanged(map); //I get error here
    })
}

道具界面如下图

interface IMapProps{
    mapId?: string;
    longitude: number;
    latitude: number;
    level:number;
    onBoundsChanged?:{
        (map:any) : void
    }
}

即使我在 if 语句中检查 props.onBoundsChanged，我也会收到 TS2722：无法调用可能是“未定义”的对象。在我使用 props.onBoundsChanged 的​​位置出错。我该如何解决这个问题？

Answer 1

TypeScript 说您onBoundsChanged可能未定义，因为您已将其定义为(?)接口 IMapProps 中的可选属性：

onBoundsChanged?: {}

您的支票onBoundsChanged的truthy价值是正确的，但该事件监听器会在稍后的时间，这意味着调用onBoundsChanged可能是不确定的像@basarat规定。您可以通过在侦听器中使用其中之一来避免此错误。

在调用之前检查真值 onBoundsChanged

if(props.onBoundsChanged) onBoundsChanged(map)

使用可选链 ?.操作符访问onBoundsChanged

props?.onBoundsChanged(map)

一些有用的学习资源：

您可以truthy在此处从 MDN 中阅读有关值的更多信息。 https://developer.mozilla.org/en-US/docs/Glossary/Truthy

更多关于optional chaining ?.这里的运营商。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining