Search code examples
javascriptreactjsoperator-precedence

JSX Operator precedence ?: and?


I m working with React-Router-v6 and i want to pass some props as location in useRoutes(). I m a little bit confused because i find an example Modal although this example doesn't use useRoutes() i was trying to run it but some operators throws some errors when i run it.
I find the ?: as conditional operator precedence but i cannot find how it works. It looks like something as ... ? ... : ... but this doesn't work for me.

My whole question is how the command below works and what the following operators (as and ?:) do.

let state = useLocation().state as { backgroundLocation?: Location };

PS: I think that the whole command is something like assign the Location as new property of state with name backgroundLocation but i still don't comprehend the whole functionality.


Solution

  • This is a TypeScript type assertion. It's unrelated to the conditional operator.

    as tells TypeScript "ignore what you compute the type to be, and instead assume it's the type I tell you". { backgroundLocation?: Location } means an object with an optional property backgroundLocation. The value of backgroundLocation is either undefined (thanks to being optional) or a Location.

    If your project is not set up to transpile typescript, then you'll need to remove the typescript and just do plain javascript. To do so for this code, simply delete as { backgroundLocation?: Location }