How to get full type safety with extracted handler function?

Below is minimal example that I am curious about.

app.get(`/api/:id`, (c) => {
  const key = c.req.param().id; // This is auto-completed
});

app.get(`/api/:id`, handler);
const handler = (c: Context<string, Environment>) => {
  const key = c.req.param().id; // This is NOT auto-completed
}

Could you guide me how to deal with this? Thanks.

[yusukebe]

Hi @yujong-lee !

Thanks for the detail you shared with us! You’re right, but there’s a lot of work to do.

So I tried another way to pass the Generics to “Handler” easily, and it was not so difficult.

@yujong-lee @ThatOneBro

This is just PoC, but it works. Define the Handler as below:

interface Handler<
  P extends string | Partial<Environment> | Partial<Schema>,
  E = Partial<Environment> | Partial<Schema>,
  S = Partial<Schema>
> {
  (
    c: Context<
      P extends string
        ? P
        : P extends Partial<Environment>
        ? string
        : P extends Partial<Schema>
        ? string
        : string,
      P extends Partial<Environment> ? P : E extends Partial<Environment> ? E : Environment,
      S extends Schema ? S : Schema
    >
  ): Response
}

Then, we can pass the Generics to Handler in three ways:

const handler1: Handler<'id', Env, Schema> = (c) => {
  const id = c.req.param('id')
  const foo = c.get('foo')
  const { query } = c.req.valid()
  return c.text('Hi')
}

There is no need to write string at the beginning when we want to pass only Env:

const foo: Handler<Env, Schema> = (c) => {
  const foo = c.get('foo')
  const { query } = c.req.valid()
  return c.text('Hi')
}

We can also pass the Schema type created from Validator:

const bar: Handler<Schema> = (c) => {
  const { query } = c.req.valid()
  return c.text('')
}

Full code: https://gist.github.com/yusukebe/cb666ab0a89faf1fd8975dff6b33a7a7

I think it’s a cool feature. I may adapt it to production code.

[yujong-lee]

@yusukebe

Wow. This Handler type is something that I was looking for.