当对象类型未知时，属性“xxx”在类型“object”上不存在

Question

我在一个包含 React Router (v6) 的 React 项目中使用 Typescript。

React Router 从 useLocation() 钩子返回一个位置对象

const location = useLocation()

它有一个称为“状态”的属性。State 是一个可以传递给任何 url 的对象，并且可以具有您想要的任何属性。它只是具有“对象”类型，因为用户可以在状态上设置任意数量的属性。

当我要访问可能属于或不属于国家一部分的财产时，麻烦就来了。我的 JS（非打字稿）代码有这个......

if(location.state && location.state.modals === true){...do something}

但表达式的第二部分给了我一个错误...属性“modals”在类型“object”上不存在

现在，我知道一个通​​用对象（这是状态的类型，由库作者设置，而不是我）没有名为.modals的属性，但我对此无能为力，它可能确实有任何属性取决于我们当前所在的应用程序页面以及当时状态中包含的内容。

我对如何解决它有点不知所措。

Answer 1

解决这个问题的一种方法是通过“as”关键字使用类型断言来告诉编译器将状态对象视为任何类型，例如

if(location.state && (location.state as any).modals){...do something}

这将允许状态具有任何值，但我们都知道处理更严格定义的类型会更好！