How to properly type handlers response when using Typescript?

[alveshelio]

Hi,

I'm using msw version 0.49.2 in a React project and I'm trying to define a handler but I'm not sure how to properly type the return type.

I've searched for examples but couldn't find any with proper typing and the ones I've found were with older versions of msw and the types where different.

I have this handler:

export const journeyHandlers: RequestHandler[] = [
  rest.get<DefaultBodyType, ResponseResolver<MarketGroup[]>>(
    `${backendUrl}/api/journeys/:operatorCode/:journeyNumber/:journeyDepartureNumber/market-groups`,
    (req, res, ctx) => res(ctx.status(200), ctx.json(marketGroupsMock))
  ),
  rest.get<DefaultBodyType, ResponseResolver<Journey>>(
    `${backendUrl}/api/journeys/:operatorCode/:journeyNumber/:journeyDepartureNumber`,
    (req, res, ctx) => res(ctx.status(200), ctx.json(journeyMock))
  ),
];

However, it doesn't matter what I put in ResponseResolver<> I never get an error, I could use ResponseResolver<MarketGroup[]>> and this would not throw an error even though journeyMock is of type Journey.

How should these handlers be properly typed so if I either change the typing or the returned object I get an error?

Thank you

[kettanaito]

Hi, @alveshelio. Thanks for raising this.

If you take a look at the generics to rest.* methods, you will see that they are listing things in the following order:

• Request body
• Request parameters
• Response body

msw/src/rest.ts

Lines 13 to 17 in 7380011

	return <
	RequestBodyType extends DefaultBodyType = DefaultBodyType,
	Params extends PathParams<keyof Params> = PathParams,
	ResponseBody extends DefaultBodyType = DefaultBodyType,
	>(

If you wish to annotate your handlers, respect that order:

rest.get<DefaultBodyType, never, Journey>(url, resolver)

Note that you don't need to wrap anything in ResponseResolver type, it's already done under the hood.

Let me know if this works for you.

[alveshelio]

Hi @kettanaito,

Thank you for clarifying things. very appreciated.