How to type `request.query` in express using TypeScript?

The solution is to use generics in the following manner.

const router = Router();

interface Foo {
    foo: string;
}

function getHandler(request: Request<{}, {}, {}, Foo>, response: Response) {
  const { query } = request;

  query.foo;

}

router.route('/')
  .get(getHandler)

I like to use the following approach in my projects.

  const { url } = req.query;
  
  if (typeof url !== "string") {
    throw new ServerError("Query param 'url' has to be of type string", 400);
  }

After checking the type TypeScript won't complain any more for this scope.

you can do it like this :-

interface Query {
   param1:string;
   param2:string;
};

function getHandler(request: Request, response: Response) {
   const {param1,param2} = request.query as unknown as Query;
}

Instead of tricking typescript, you should be validating your incoming data with actual JS.

If you are only interested in handling foo when it's a string, then validate that it's a string as you extract it from query.

function getHandler(request: Request, response: Response) {
    const { query } = request;

    const foo = (typeof query.foo === "string") ? query.foo : "";

    // Want to error check?
    if (foo === "") {
        // Handle missing foo
    }

    // You now have a guaranteed string that typescript recognizes as a string

    const myNumber = parseInt(foo); // No warnings here
}

This is what I use, which seems to be compatible with strict/recommended TS settings:

import type { Request } from "express";

type EmptyObject = Record<string, never>;

export type RequestWithBody<T> = Request<
  EmptyObject,
  EmptyObject,
  T,
  EmptyObject
>;

export type RequestWithQuery<T> = Request<
  EmptyObject,
  EmptyObject,
  EmptyObject,
  T
>;

And then something like:

export async function somethingPost(
  req: RequestWithBody<Payload>,
  res: Response
) {
...
}

I don't know how to type the Response properly. If I use Response<SomethingResponse | string> my function seems to be strict about the json return values, but express doesn't accept it as an argument to post().

The | string is because I either successfully return the response or return an error code with a string message in the body.

In my humble opinion the simpler and straight forward method is to use the StringConstructor. Any downside of this method in this particular situation is welcome in the comments.

var String: StringConstructor (value?: any) => string Allows manipulation and formatting of text strings and determination and location of substrings within strings.

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

const router = Router();

function getHandler(request: Request, response: Response) {
  const { foo } = request.query;

  String(foo) // string
}

router.route('/').get(getHandler)

Just an idea:

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

const router = Router();

interface HandlerRequest extends Request {
    query: {
        foo: string
    }
}

function getHandler(request: HandlerRequest, response: Response) {
  const {query: {foo}} = request;

  if (foo) {
    // Do something
  } else {
    // Otherwise...
  }       
}

router.route('/')
  .get(getHandler)

I just stumbled upon this and discovered that express depends on qs, which supports non-standard query string formats like arbitrarily nested arrays and objects.

This is why we are forced to handle cases where request.query.foo is something other than string | undefined: they could actually happen.

The correct course of action is to either ignore the request or let the client know that it's malformed. I saw a lot of answers recommending to simply turn off type checking. This is truly bad advice. You should always investigate whether an error could actually happen at runtime before silencing a type error. It's what TS is for.

You can also try this:

// express.interface.ts

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

interface RequestParams {}

interface ResponseBody {}

interface RequestBody {}

interface RequestQuery {
  /* Add custom parameters to use like `req.query.id` */
  id?: string
}

interface ResponseBody {}

export interface CustomRequest<P = RequestParams, ResBody = ResponseBody, ReqBody = RequestBody, Q = RequestQuery>
  extends Request<P, ResBody, ReqBody, Q> {}

export interface CustomResponse<ResBody = ResponseBody> extends Response<ResBody> {}

export interface CustomNextFunction extends NextFunction {}

Add proper function or parameters on each interfaces. Also you could add custom functions in each CustomRequest, CustomResponse, CustomNextFunction like error handling.

Another possible solution is to use Type Assertion:

function getHandler(request: Request, response: Response) {

  const foo: string = request.query.foo as string

  //do something with foo ...

}

I know this is an old question...

...but here is the best approach (without annoying typecasting):

const { email } = req.query as unknown as {email:string};

Full example:

export async function getUserByEmail(req: Request, res: Response, next: NextFunction) {
    const { email } = req.query as {email:string};
    console.log(email)
}

You do it inline without declaring interfaces.

const { var1, var2, var3 } = req.query as { var1:string, var2:number, var3:boolean }

EDIT:

If you get an error just add

as unknown

Example:

const { email } = req.query as uknown as {email:string};

The best solution for me was to first cast as unknown, and then my custom interface.

interface CustomReqQuery {
   foo: string;
   bar: string;
}

function getHandler(req: Request, res: Response) {
  const { foo, bar } = req.query as unknown as CustomReqQuery;

  ...
}