修复

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的{{1}}值的检查是正确的，但是事件侦听器将在以后调用，这意味着truthy可能未定义，就像指定的@basarat一样。您可以通过在侦听器内部使用以下其中之一来避免此错误。

在致电onBoundsChanged之前检查真实值

onBoundsChanged

使用可选链接 if(props.onBoundsChanged) onBoundsChanged(map)运算符访问?.

onBoundsChanged

一些有用的学习资源：

您可以在此处从MDN中详细了解props?.onBoundsChanged(map)值。 https://developer.mozilla.org/en-US/docs/Glossary/Truthy

此处有关truthy运算符的更多信息。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 2

由于您的事件监听器可能比您执行检查的时间晚了，因此TypeScript在抱怨

修复

存储TypeScript知道有效的引用，例如

let bcInst;
if(props.onBoundsChanged){
    const {onBoundsChanged} = props; // STORE
    bcInst = kakao.maps.event.addListener(map, 'bounds_changed',()=>{
        onBoundsChanged(map); // OKAY
    })
}

或者将检查移到侦听器内部。

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

2 个答案:

修复