Express + TypeScript: Create type inference for response.locals

Question

I want to add types for my response.locals. It is used to append data to your request-response cycle.

What I tried

// ./types/express/index.d.ts
declare global {
    declare namespace Express {
        interface Response {
            locals: {
                userId: number;
            };
        }
    }
}

// tsconfig.json
    "compilerOptions": {
        "typeRoots": ["./types"],
    }

myController.post("/", async (request, response) => {
     // Can't get type in my controller
    const { userId } = response.locals; // <- userId is any

Goal: Get correct type inference for my response.locals variable

Versions: "express": "^4.17.1", "@types/express": "^4.17.8", "typescript": "^4.5.4"

@st.huber no, not really :/. I'm looking for a way to extend response.locals through an additional declaration file. — Sir hennihau
– Sir hennihau, Commented Jan 19, 2022 at 9:06
typeRoots option has a default value; make sure to include it — Parzh
– Parzh, Commented Jan 20, 2022 at 15:52
Have you tried including it in the files section of tsconfig? — ShamPooSham
– ShamPooSham, Commented Jan 25, 2022 at 10:36
@ShamPooSham Yes, I tried to include it there. Didn't change anything, unfortunetaly. — Sir hennihau
– Sir hennihau, Commented Jan 25, 2022 at 16:51

elnygren · Accepted Answer · 2023-02-23 15:17:09Z

9

Looking at @types/express-serve-static-core/index.d.ts we can see that there is a global namespace Express with some interfaces that we can extend. One of them is Locals :)

The solution:

src/types.d.ts (or similar, include it in tsconfig, eg in the "types" field)

declare global {
  namespace Express {
    interface Locals {
      anything: 'here'
    }
  }
}

answered Feb 23, 2023 at 15:17

elnygren

5,3654 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guido Glielmi Over a year ago

What did it for me was declare module 'express-serve-static-core' instead of namespace Express

Heiko Theißen · Accepted Answer · 2022-01-26 15:38:39Z

2

Without a proper TypeScript background, I was able to compile the following (after some trial and error):

import {Request, Response} from "express";
interface Locals extends Record<string, any> {
  userId: number;
}
interface MyResponse extends Response {
  locals: Locals;
}
export function middleware(request: Request, response: MyResponse) {
  const {userId} = response.locals;
  response.end(userId);
  return userId;
}

The declaration file (.d.ts) contains:

export declare function middleware(request: Request, response: MyResponse): number;

so the number type was correctly inferred.

And it works when I use this middleware function in express.

edited Jan 26, 2022 at 15:38

answered Jan 20, 2022 at 15:49

Heiko Theißen

18.3k2 gold badges14 silver badges50 bronze badges

2 Comments

Sir hennihau Over a year ago

userId is still assumed as any by TypeScript. Yes, it compiles. But I don't achieve type-safety this way.

Heiko Theißen Over a year ago

I have edited my answer.

Eliav Louski · Accepted Answer · 2024-05-06 19:09:50Z

0

You can checkout my new lib express-typed which is small type safe typescript wrapper around express router.

With express-typed the returned types are inferred and exported from your backend, and later imported from your frontend.

Successfully deployed to production and improved development cycles!

answered May 6, 2024 at 19:09

Eliav Louski

5,6325 gold badges39 silver badges78 bronze badges

Comments

Bijin Kandengalath · Accepted Answer · 2024-08-10 18:09:59Z

0

This worked for me:

// ./types/express/index.d.ts
declare namespace Express {
  interface Locals {
    userId: number;
  }
}

add the ./types/express/index.d.ts inside "files" and "include" field in tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    ...
  },
  "include": ["./**/*.ts"],
  "files": ["./types/express/index.d.ts"]
}

*field "files" will not accept glob patterns, must add full path

answered Aug 10, 2024 at 18:09

Bijin Kandengalath

437 bronze badges

Comments

NSjonas · Accepted Answer · 2025-09-05 05:14:44Z

0

The modern way to do this would be to use the second type parameter of the express Response object:

import express, { Response } from "express";

type UserLocals = {
  userId?: string;
}

const app = express();

app.use("/", (request, response: Response<any, UserLocals>, next) => {
    response.locals.userId = '123'; 
    next();
});

app.post("/", async (request, response: Response<any, UserLocals>) => {
    const { userId } = response.locals; // userId: string | undefined
});

answered Sep 5 at 5:14

NSjonas

12.4k11 gold badges76 silver badges103 bronze badges

Collectives™ on Stack Overflow

Express + TypeScript: Create type inference for response.locals

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related