How can I cast NextJS router.query as a number?

Question

const router = useRouter()
const { photoId } = router.query

I get this Typescript warning when doing a comparison:

TS2367: This condition will always return 'false' since the types 'number' and 'string | string[]' have no overlap.

This makes perfect sense, so I typecast my variable like this:

const router = useRouter()
const { photoId } = parseInt(router.query, 10)

But now I get this warning:

TS2345: Argument of type 'ParsedUrlQuery' is not assignable to parameter of type 'string'.

When I look at the source code for NextJS router, I see this:

interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }

Which looks like I'm pretty close to getting what I need, which is just a string instead of a string or array of strings. Where do I go from here?

Answer 1

You can tell compiler how the variable should be treated:

const photoId = parseInt(router.query.photoId as string, 10)

Note that attributes of router.query can be undefined.

Answer 2

One solution would be doing a casting in this way:

const photoId = router.query.photoId ? +router.query.photoId : undefined;

Query props might be undefined, so you first check if it's defined, the use the unary operator, or just return the undefined. The type of integer would be number | undefined. Of course, keep in mind if the photoId is value that can be converted to number.

I always try to refrain from using as as typescript is already unsound, so this isn't adding an extra "trustiness" to the type system itself.