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

Question

我正在包含React Router（v6）的react项目中使用Typescript。

React Router从useLocation（）挂钩返回位置对象

const location = useLocation()

具有称为“状态”的属性。状态是可以传递给任何URL并可以具有所需任何属性的对象。它只是具有一种“对象”类型，因为用户可以在状态上设置任意数量的属性。

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

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

但是表达式的第二部分给了我一个错误... 类型“对象”上不存在属性“模态”

现在，我知道一个通​​用对象（这是状态类型，由库作者设置，不是由我自己设置）没有名为 .modals 的属性，但是我不能对此做很多事情，根据我们当前所处应用程序的页面以及当时状态所包含的内容，它实际上可能有任何适当的用途。

我对如何解决它有些茫然。

Answer 1

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

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

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

Answer 2

React Router类型允许您指定位置对象的期望状态：

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/843feeed9961898fc2d73dc80dba3502f6608386/types/react-router/index.d.ts#L163

parseFloat((257.78 * 100).toFixed(2))

因此，我相信您应该可以通过如下定义位置来解决此错误：

export function useLocation<S = H.LocationState>(): H.Location<S>;