Node.js + Express + TypeScript: req.query type

Updated: September 14, 2022 By: Snowball Post a comment

When working with Node and Express.js, there might be cases where you need to access req.query, an object that contains the property for each query string parameter in the route. For example, given a route like so:

http://localhost:3000?foo=abc&bar=def&something=123

Then req.query will look like this:

{ foo: 'abc', bar: 'def', something: '123' }

If you write code with TypeScript, you may wonder what is the proper type for req.query? There is more than one solution to this question.

Table Of Contents

1 Solution 1

2 Solution 2

Solution 1

The Request interface (which can be imported from express) is a generic which accepts additional definitions:

interface Request<
        P = core.ParamsDictionary,
        ResBody = any,
        ReqBody = any,
        ReqQuery = core.Query,
        Locals extends Record<string, any> = Record<string, any>
    > extends core.Request<P, ResBody, ReqBody, ReqQuery, Locals> {}

Therefore, we can do as follows:

import { Request, Response, NextFunction } from 'express';

// interfaces
interface ReqParams {
  /* Add something as needed */
}
interface ReqBody {
  /* Add something as needed */
}
interface Resbody {
  /* Add something as needed */
}
interface ReqQuery {
  foo: string;
  bar: string;
  something?: string;
}

// controller
export const getThings = (
  req: Request<ReqParams, ReqBody, Resbody, ReqQuery>,
  res: Response,
  next: NextFunction
) => {
  const { foo, bar, something } = req.query;
  console.log(foo, bar, something);

  res.status(200).json({ message: 'Welcome to KindaCode.com!' });
};

Solution 2

You can also use type casting like this:

import { Request, Response, NextFunction } from 'express';

// controller
export const getThings = (req: Request, res: Response, next: NextFunction) => {

  const foo: string = req.query.foo as string;
  const bar:string = req.query.bar as string;
  const something: string = req.query.something as string;
  console.log(foo, bar, something);

  res.status(200).json({ message: 'Welcome to KindaCode.com!' });
};

That’s it. Further reading: