ParsedUrlQuery typings should allow undefined values

Bug report

Describe the bug

I am not sure if this is an upstream bug or not. This is about the ctx.query object.

The type ParsedUrlQuery exported from @types/node/querystring looks wrong. It is string | string[] but in theory could be undefined as well.

To Reproduce

// /user.tsx
UserPage.getInitialProps = async (ctx) => {
  const user = ctx.query.user; // CAN be undefined, but is shown as string | string[]

  return {
    // ...
  };
};

Router.push('/user', {
  query: {
    somethingElse: 'blabla' 
    // not defining 'user' here
  }
})

Expected behavior

The types for the query object should be less permissive and includes undefined in order to write safer code.

Screenshots

System information

• OS: n/a
• Browser (if applies): n/a
• Version of Next.js: 6.2.1

Additional context

The current way of solving it is to extend the querystring module by re-declaring it. It is fine, but annoying.

[msheakoski]

@neefrehman You’re welcome. You can use the type guard once and anything that comes after in the same context will be considered a string:

const sketchId = isString(router.query.sketch) ? router.query.sketch : ""
// or inline the check
const sketchId = typeof router.query.sketch === "string" ? router.query.sketch : ""

The type assertion in your example is a risky approach because it can still lead to errors. For example, /^[0-9]{6}$/).test(["123456"]) will return true, and any code that depends on sketchId being a string without checking will fail.

In my own code, whenever I feel the need to use a forced type assertion, it usually means that I am missing a necessary check or need to change my logic flow. I only use it as a last resort when I know that I am being smarter than TypeScript.

[neefrehman]

I’m having a related issue when trying to extract a query in a dynamic route. I’m destructuring a variable (which will be a string) from the router.query object, which later I’ll need to use some string-specific properties on such as .substr. I’m getting errors from this as the variable could also be of type string[]:

When trying to be explicit about the type, I’m getting another saying that I cant assign type string to ParsedUrlQuery (renaming the variable in the destructuring assignment doesn’t cause the issue):

Currently the only workaround is to assign a type of any, which isn’t ideal:

const { sketch: sketchId }: any = router.query;

Is there a way to assign a type of only string to the returned variable so I can continue treating it as such?

Happy to open another issue if needed, but I felt this one was close! I’m currently on the most up-to-date typings.