javascript - Property 'xxx' does not exist on type 'object' when object is of unknown type - Sta

admin管理员组

文章数量:1399313

I am using Typescript in a react project which includes React Router (v6).

React Router returns a location object from the useLocation() hook

const location = useLocation()

which has a property called "state". State is an object which can be passed to any url and can have any properties you want. It simply has a type of "Object" because the user can set any number of properties on the state.

The trouble es when I e to access a property which may or not be part of the state. My JS (non-typescript) code had this...

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

But the second part of the expression gives me an error... Property 'modals' does not exist on type 'object'

Now, I know that a generic object (which is the type of the state, set by the library author, not me) doesn't have a property called .modals but I can't do a lot about that, it could have literally any propery depending on what page of the app we're currently in and what's contained in the state at that moment.

I'm at a bit of a loss about how to fix it.

I am using Typescript in a react project which includes React Router (v6).

React Router returns a location object from the useLocation() hook

const location = useLocation()

which has a property called "state". State is an object which can be passed to any url and can have any properties you want. It simply has a type of "Object" because the user can set any number of properties on the state.

The trouble es when I e to access a property which may or not be part of the state. My JS (non-typescript) code had this...

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

But the second part of the expression gives me an error... Property 'modals' does not exist on type 'object'

Now, I know that a generic object (which is the type of the state, set by the library author, not me) doesn't have a property called .modals but I can't do a lot about that, it could have literally any propery depending on what page of the app we're currently in and what's contained in the state at that moment.

I'm at a bit of a loss about how to fix it.

• javascript
• reactjs
• typescript
• react-hooks
• react-router

Share Improve this question Follow edited Feb 2, 2022 at 11:35 Ben Smith 20.3k66 gold badges7373 silver badges9797 bronze badges asked May 16, 2020 at 23:14 jonhobbsjonhobbs 28k3939 gold badges118118 silver badges179179 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

One way to get around this problem is to use type assertion via the "as" keyword to tell the piler to consider the state object as any type e.g.

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

This would allow state to have any value but we both know that it would be better to deal with a more rigidly defined type!

The React Router types allow you to specify what state you expect on your location object:

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

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

Therefore I believe you should be able to fix this error by defining your location as follows:

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

本文标签： javascriptProperty 39xxx39 does not exist on type 39object39 when object is of unknown typeStack Overflow