How to add Typescript definitions to Express req & res - node.js

Question

I have a set of controller functions for my REST API and I'm getting lots of the following
error TS7006: Parameter 'req' implicitly has an 'any' type.
Likewise for res. I've been playing around with typeings etc. but with no success. For example the Request type parameter below does NOT work.
Here is an example of the controller files. The reference path is correct.
/// <reference path="../../../typings/tsd.d.ts" />
/* globals require */
"use strict";
exports.test = (req : Request, res) => {
I tried adding import * as express from "express"; into the file - I don't need it normally as these functions are exported and use by index.js which actually implements the routing.
And this is tsd.d.ts
/// <reference path="requirejs/require.d.ts" />
/// <reference path="express/express.d.ts" />
/// <reference path="mime/mime.d.ts" />
/// <reference path="node/node.d.ts" />
/// <reference path="serve-static/serve-static.d.ts" />
/// <reference path="bluebird/bluebird.d.ts" />
/// <reference path="mongoose/mongoose.d.ts" />

Answer 1

You can use ES6 style named imports to import only the interfaces you need, rather than import * as express from 'express' which would include express itself.
First, make sure you have installed the type definitions for express (npm install -D #types/express).
Example:
// middleware/authCheck.ts
import { Request, Response, NextFunction } from 'express';
export const authCheckMiddleware = (req: Request, res: Response, next: NextFunction) => {
...
};
// server.ts
import { authCheckMiddleware } from './middleware/authCheck';
app.use('/api', authCheckMiddleware);
Currently using TypeScript 2.3.4 and #types/express 4.0.36.

Answer 2

It can be daunting to type the arguments every time you need to write middleware functions so you can just type the whole function directly too.
npm i #types/express --save-dev ("#types/express": "^4.17.0")
After installing typings..
// This can be shortened..
import { Request, Response, NextFunction } from 'express';
export const myMiddleware = (req: Request, res: Response, next: NextFunction) => {
...
};
// to this..
import { RequestHandler } from 'express';
export const myMiddleware: RequestHandler = (req, res, next) => {
...
};
// or in case it handles the error object
import { ErrorRequestHandler } from 'express';
export const myMiddleware: ErrorRequestHandler = (err, req, res, next) => {
...
};

Answer 3

What I've found is that you can leverage TypeScript generics very effectively to create a wrapper around the Express Request type.
You can declare something that looks similar to this in an interfaces file/folder:
import { NextFunction, Request, Response } from 'express';
type TypedRequest<
ReqBody = Record<string, unknown>,
QueryString = Record<string, unknown>
> = Request<
Record<string, unknown>,
Record<string, unknown>,
Partial<ReqBody>,
Partial<QueryString>
>;
export type ExpressMiddleware<
ReqBody = Record<string, unknown>,
Res = Record<string, unknown>,
QueryString = Record<string, unknown>
> = (
req: TypedRequest<ReqBody, QueryString>,
res: Response<Res>,
next: NextFunction
) => Promise<void> | void;
TypedRequest is effectively a wrapper around Express' Request interface, and populates it with the generics that you pass it, but are also optional (note Record<string, unknown>. It then also applies a Partial around each of the generics (you probably want to make this a DeepPartial instead)
ExpressMiddleware takes in 3 optional generics ReqBody Res and QueryString. These are used to construct a function signature that resembles what middlewares/controllers should look like.
The above then allows you to strongly type & consume as follows:
import { ExpressMiddleware } from '../interfaces/ExpressMiddleware';
type Req = { email: string; password: string };
type Res = { message: string };
export const signupUser: ExpressMiddleware<Req, Res> = async (req, res) => {
/* strongly typed `req.body`. yay autocomplete 🎉 */
res.json({ message: 'you have signed up' }) // strongly typed response obj
};
I hope this helps someone. It's made a massive difference to my Express experience.

Answer 4

The best way to do this is like so.
// create some shared types in your project
import { Request, Response, NextFunction } from 'express';
export type MiddlewareFn = (req: Request, res: Response, next: NextFunction) => void;
// then use the above types:
import {MiddlewareFn} from './my-types.d.ts'
router.get('/foo', <MiddlewareFn>function (req, res, next) {
// ....
});

Answer 5

Rather than installing types(#types/express) you should also define request parameters. Since every parameter is string, interface should base on dictionary.
Here is an inline route handler:
interface GetParams {
[key: string]: string
paramName: string
}
router.get<GetParams>('/:paramName', (req, res) => {
res.send('Parameter is ' + req.params.paramName)
})

Answer 6

Use:
req: Express.Request
res: Express.Response