What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

Question

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

disclaimer: I am a bit uncertain about variance in general...

Here is the scenario I am facing:

// index.ts
import express from 'express';
import {Request, Response} from 'express';
const app = express();
app.use(handler);

interface BetterRequest extends Request {
    foo: string;
}

function handler(req: BetterRequest, res: Response) {
    req.foo = 'bar';
}

// tsconfig.json
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "strict": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    }
}

The error message I encounter is

[ts]
Argument of type '(req: BetterRequest, res:Response) => void' is not assignable to parameter of type'RequestHandlerParams'.
Type'(req: BetterRequest, res: Response) => void' is not assignabl...
   <!-- Here the content was shortened -->

<p>I comprehend the meaning of the error and that I could either disable those warnings through editing the <code>tsconfig.json file or by using a line comment. However, that's not my preferred solution.

What would be the correct way to address this issue?

Is the below approach the only option?

// index.ts
function handle(req: Request, res: Response) {
    const modifiedReq = req as BetterRequest;
    modifiedReq.foo = 'bar';
}

typescript express covariance contravariance

Answer 1

Answer №1

If you are certain that you will be setting the foo property right away and want to avoid constantly checking if it is defined, an explicit cast is the most efficient way to go. Alternatively, you could declare the foo property as optional. This allows a Request to be implicitly converted to a BetterRequest, making your handler compatible with an Express handler. However, keep in mind that the type of the foo property will include undefined, requiring you to handle this scenario every time you access the property.

Answer 2

If you are certain that you will be setting the foo property right away and want to avoid constantly checking if it is defined, an explicit cast is the most efficient way to go. Alternatively, you could declare the foo property as optional. This allows a Request to be implicitly converted to a BetterRequest, making your handler compatible with an Express handler. However, keep in mind that the type of the foo property will include undefined, requiring you to handle this scenario every time you access the property.

Answer 3

Answer №2

An issue arises at the point of app.use(handler) due to the error message received:

The type 'Request' cannot be assigned to type 'BetterRequest'. The property 'foo' is missing in type 'Request'.

This assignment is rejected by the compiler because when handler says, "I'm expecting a 'BetterRequest' from the caller," app.use() counteracts with, "I can only promise to pass in a 'Request' for any handler provided."

To resolve this, using a type assertion seems like the most elegant solution:

app.use(handler as RequestHandler)

With this type assertion, app.use() acknowledges that even though handler is a 'BetterRequestHandler' in reality, it will function correctly as a 'RequestHandler'. This eliminates the need to constantly verify the value of req.foo just to satisfy the compiler.

This approach builds upon Matt McCutchen's proposal of making req.foo optional, ensuring smoother operation without continuously validating its existence.

For instance, in my scenario, I aimed to incorporate a validation middleware before the primary handler:

interface ValidatedRequest<T extends object> extends Request {
    validation: T,
}

function registerValidate(
    req: ValidatedRequest<RegisterInput>,
    res: Response,
    next: NextFunction,
) {
    const validation : string | RegisterInput = validate<RegisterInput>(req.body);
    if (typeof validation === 'string') {
        return next(badRequest(validation));
    } else {
        req.validation = validation;
        next();
    }
}

function register(
    req: ValidatedRequest<RegisterInput>,
    res: Response,
    next: NextFunction
) {
    // Use req.validation
}

app.post(
    '/path', 
    registerValidate as RequestHandler,
    register as RequestHandler
);

Answer 4

An issue arises at the point of app.use(handler) due to the error message received:

The type 'Request' cannot be assigned to type 'BetterRequest'. The property 'foo' is missing in type 'Request'.

This assignment is rejected by the compiler because when handler says, "I'm expecting a 'BetterRequest' from the caller," app.use() counteracts with, "I can only promise to pass in a 'Request' for any handler provided."

To resolve this, using a type assertion seems like the most elegant solution:

app.use(handler as RequestHandler)

With this type assertion, app.use() acknowledges that even though handler is a 'BetterRequestHandler' in reality, it will function correctly as a 'RequestHandler'. This eliminates the need to constantly verify the value of req.foo just to satisfy the compiler.

This approach builds upon Matt McCutchen's proposal of making req.foo optional, ensuring smoother operation without continuously validating its existence.

For instance, in my scenario, I aimed to incorporate a validation middleware before the primary handler:

interface ValidatedRequest<T extends object> extends Request {
    validation: T,
}

function registerValidate(
    req: ValidatedRequest<RegisterInput>,
    res: Response,
    next: NextFunction,
) {
    const validation : string | RegisterInput = validate<RegisterInput>(req.body);
    if (typeof validation === 'string') {
        return next(badRequest(validation));
    } else {
        req.validation = validation;
        next();
    }
}

function register(
    req: ValidatedRequest<RegisterInput>,
    res: Response,
    next: NextFunction
) {
    // Use req.validation
}

app.post(
    '/path', 
    registerValidate as RequestHandler,
    register as RequestHandler
);

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

Answer №1

Answer №2

Similar questions

Why does my Node.JS Express request return undefined after submitting a post request from a form?

Showcasing data from MongoDB to the user interface

To handle async actions in Typescript with React and Redux, ensure that all actions passed to axios are plain objects. If you need to perform

Creating unique random shapes within a larger shape on a canvas, as shown in the image

Redirecting a React page to a SAML login using an Express backend with Passport integration

What is the best way to pass an array as a parameter in Angular?

TS2531: Nullability detected in object when using .match() method

Collection of assorted objects with varying sizes that are all subclasses of a common superclass

Exploring the benefits of using getServerSideProps with NextJS and Typescript for

Achieve validation of numerous variables without the need for a string of if-else

What causes the (passport) middleware to trigger when using app.get, but not when using app.post?

Update the nest-cli.json configuration to ensure that non-TypeScript files are included in the dist directory

After being awaited recursively, the resolved promise does not perform any actions

An issue encountered with the 'sharp' module in Node.js Express

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

Having trouble with my findIndex function in Node.js while working with a mongo DB database

Error in Angular SSR: Build failed due to project reference without "composite" setting set to true

How come when I remove the line app.use(express.static(__dirname, 'public')) my HTML pages don't load the CSS files?

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

Error: Failed to fetch the data from the Firebase database