Type error using default RequestHandler type

[Erazihel]

Hey guys,

I've set up msw in my project and I must say that I'm pretty amazed 👍

Everything is working flawlessly but I have a TypeScript error that I can't get rid off without using any.

Here is my code:

export function handleCourse(): RequestHandler {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
}

And this is the TypeScript error that I get:

mocks/handlers.ts:22:3 - error TS2322: Type 'RequestHandler<MockedRequest<DefaultRequestBodyType, RequestParams>, RestContext, ParsedRestRequest, MockedRequest<...>, any>' is not assignable to type 'RequestHandler<MockedRequest<DefaultRequestBodyType, RequestParams>, { status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<...>; set: <N extends string | Record<...>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) => R...'.
  Types of property 'resolver' are incompatible.
    Type 'ResponseResolver<MockedRequest<DefaultRequestBodyType, RequestParams>, RestContext, any>' is not assignable to type 'ResponseResolver<MockedRequest<DefaultRequestBodyType, RequestParams>, { status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<...>; set: <N extends string | Record<...>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) =>...'.
      Types of parameters 'context' and 'context' are incompatible.
        Type '{ status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<any>; set: <N extends string | Record<string, string | string[]>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) => ResponseTransformer<...>; fetch: (input: string ...' is not assignable to type 'RestContext'.

22   return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

By overcharging with any the RequestHandler type, the error goes away but I don't like setting a any as a type...

export function handleCourse(): RequestHandler<MockedRequest, any> {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
}

Is there a way to achieve this without any?

Thanks for your time 🙏

[marcosvega91]

Hi @Erazihel thanks for reaching us :).

You can do in this way

import {
  rest,
  RequestHandler,
  MockedRequest,
  RequestParams,
  restContext,
  ParsedRestRequest,
} from 'msw'


export function handleCourse(): RequestHandler<
  MockedRequest<null, RequestParams>,
  typeof restContext,
  ParsedRestRequest,
  MockedRequest<null>,
  string
> {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })))
}

You can also drop the response type because it will be inferred from the return value

export function handleCourse() {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })))
}

[kettanaito]

I wonder if return type inference would be preferable in this scenario.