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

Question

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

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

const location = useLocation()

它有一个名为“state”的属性。 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}

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

Answer 2

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

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

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

因此，我相信您应该能够通过如下定义您的位置来修复此错误：

const location = useLocation<{ modals: string }>()