CODEWITHSUNDEEP
node.jsexpresstypescript
Simon H
Simon H

Reputation: 21005

How to add Typescript definitions to Express req & res

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" />

Upvotes: 58

Views: 75392

Answers (7)

Surya Pratap
Surya Pratap

Reputation: 93

The simplest method is to use RequestHandler in express.

import { RequestHandler } from "express";

export const yourController: RequestHandler = (req, res , next)=>{
    res.send({})
}

Upvotes: 1

Jamie
Jamie

Reputation: 4295

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.

Upvotes: 19

Crawk
Crawk

Reputation: 23

Use:

req: Express.Request
res: Express.Response

Upvotes: 0

J. NZ
J. NZ

Reputation: 1059

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.

Upvotes: 96

mkg
mkg

Reputation: 779

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)
})

Upvotes: 3

Jonathan002
Jonathan002

Reputation: 10268

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) => {
  ...
};

Upvotes: 44

Alexander Mills
Alexander Mills

Reputation: 99980

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) {

   // ....
});

Upvotes: 3

Related Questions