Overwrite `any` in TypeScript when merging interfaces

Question

I'm using Express and I'm trying to explicitly define res.locals. In the @types/express package, Express.Response.locals is any, so I can't seem to overwrite it:

types/express/index.d.ts:

declare namespace Express {
  interface Response {
    locals: {
      myVar: number
    }
  }
}

My Middleware:

import * as express from 'express'

function middleware(
  req: express.Request, 
  res: express.Response, 
  next: express.nextFunction
) {
  res.locals.myVar = '10' // I want this to throw a compiler error
  next()
}

I want my wrong assignment of res.locals.myVar to error, but res.locals is still any according to my autocompletion.

How can I remove any and completely replace it?

Mártin Alcalá · Accepted Answer · 2022-02-05 16:35:34Z

21

I recently ran into this issue and managed to resolve it by creating an index.d.ts in my src folder to overwrite res.locals, my implementation looked like this:

// src/index.d.ts
import 'express';

interface Locals {
  message?: string;
}

declare module 'express' {
  export interface Response  {
    locals: Locals;
  }
}

Make sure you also have it included in your tsconfig.json, e.g

// somewhere in your tsconfig.json
  "include": [
    "src/**/*.ts"
  ]

You would use the interface just as you would normally

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

export const handler = (req: Request, res: Response, next: NextFunction) => {
  // should be typed
  res.locals.message = 'hello'
}

Hope this helps!

edited Feb 5, 2022 at 16:35

Mártin Alcalá

6,1291 gold badge10 silver badges14 bronze badges

answered Aug 15, 2019 at 12:48

Faris Tangastani

9177 silver badges7 bronze badges

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

8 Comments

Faris Tangastani Over a year ago

Hey @natterstefan, make sure you import express at the top of the index.d.ts

natterstefan Over a year ago

Thank you @Faris, worked for me now. Do you also know how to extend Express.Handler so I do not need to add res: Response, but still be able to use the custom Response interface?. Edit: Maybe you can link to this resource as well in your answer -> github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…

ghashi Over a year ago

I think this answer is now obsolete. Here's what worked for me (express 4.16.1): stackoverflow.com/a/55718334/3670829

Sir hennihau Over a year ago

Also didn't work for me in express 4.17

elnygren Over a year ago

Working solution stackoverflow.com/a/75546820/5043802

|

Aniruddha Ghosh · Accepted Answer · 2024-02-05 23:25:42Z

7

The current accepted answer is outdated and broken. The new solution is to add the following to a *.d.ts file in the project like below:

{
    "compilerOptions": {
        // All your typescript compiler options
    },
    "include": ["src/**/*", "types/*.ts"],
}

Then create a locals.d.ts inside your types folder and add all your custom properties. Be sure to provide the correct path of the types folder. In my include option, my types are in the root directory of the project.

declare global {
  namespace Express {
    interface Locals {
      shopify: { session: Session }
    }
  }
}

Explanation can be found here.

edited Feb 5, 2024 at 23:25

Aniruddha Ghosh

1037 bronze badges

answered Feb 23, 2023 at 15:20

elnygren

5,3654 gold badges23 silver badges33 bronze badges

4 Comments

Adophilus Over a year ago

this works really nicely

topched Over a year ago

@elnygren This still lets you put anything on the interface w/o it caring. Do you know how to make it so locals is only what you specify? In this example only shopify we be on the locals and if you tried to write something else it would error out.

Aniruddha Ghosh Over a year ago

@topched Just make an interface and export it. Then import it anywhere where you want to use it locally. There are many other solutions too. This is the simplest.

thvroyal Over a year ago

declare the interface for Locals worked!

Titian Cernicova-Dragomir · Accepted Answer · 2019-03-26 17:19:46Z

2

Unfortunately there is no way to override any using interface merging. You can so some surgery on the type and replace the type using mapped and conditional types:

import * as express from 'express'

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

type MyResponse = Omit<express.Response, "locals"> & { 
  locals: {
    myVar: number
  }
}
function middleware(
  req: express.Request, 
  res: MyResponse, 
  next: express.NextFunction
) {
  res.locals.myVar = '10' // error now
  next()
}

answered Mar 26, 2019 at 17:19

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

1 Comment

Sir hennihau Over a year ago

This throws

Type '(request: Request<ParamsDictionary, any, any, ParsedQs>, response: MyResponse) => Promise<Response<any> | undefined>' is missing the following properties from type 'Application': init, defaultConfiguration, engine, set, and 61 more.

for me. I'm using express 4.17.

Collectives™ on Stack Overflow

Overwrite `any` in TypeScript when merging interfaces

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related