typescript definition for `context.req` is broken, defaulting to `any`

TS v4.7.2

Here’s a small example of how the typescript definition for context.req is not correct:

const router = new Hono<Environment>();
router.get('/transfer/:token', (c) => {
  const token = c.req.param('token');
  return new Response(token);
})

VSCode autocomplete does not work because .req is defaulting to any.

https://user-images.githubusercontent.com/440299/171968643-bc5f903a-0e87-46a5-91c0-cbd2bdff06d4.mov

[yusukebe]

@UnsungHero97

You’re welcome. Thank you for your feedback!

why not attach params to the context object instead of extending Request?

It’s a very good point. That’s what I was wondering too. The answer is that I want to put everything about the request into the Request object. I think that would be easier for users to understand.

For example, the Request object has a header. Then, let us consider the case that we attach the method to get the header value into the Context object. What should we name the method? c.header? But we already use c.header to set header value like c.header('x-custom', 'value'). c.getHeader? Hmm… I don’t like getThing. I think it’s better to use c.req.header.

That’s the reason.

It might also be easier to work with in typescript, something like this

Yes it’s a good thing. Currently, we can still write following:

[UnsungHero97]

Awesome! I can confirm v1.4.4 is working, thanks! A quick question …

Why did you choose to extend the Request prototype? You already have the Context object that I will always need to interact with anyway …

Context<RequestParamKeyType extends string = string, E = Env>

… I already have to define the parameter strings to pass for RequestParamKeyType and I already have to define the environment type to pass for Env, why not attach params to the context object instead of extending Request? This way, you do not need to modify the Request object (which would have avoided this issue, I think). It might also be easier to work with in typescript, something like this:

const router = new Hono<Environment>();
router.get('/transfer/:token', getTransfer)

async function getTransfer(c: Context<{ token: string }, Environment>) {
  const token = c.req.params?.token;
  return new Response(token);
}