Allow typing event context

[ElMatella]

Question: How to define context typescript type?

Hey, not sure if this is an h3 question or a lack of typecript knowledge from me.

I am using Nuxt 3 and am trying to add types to my server handlers. I have a simple server handle:

export default defineEventHandler((event) => { // event here is a H3Event object
    const result = event.context.container.resolve()
    return {
      result
    }
})

The event here is a H3Event:

interface H3Event {
    '__is_event__': true;
    event: H3Event;
    req: IncomingMessage;
    res: ServerResponse;
    context: Record<string, any>;
}

And I have a middleware where I do the following:

export default defineEventHandler((event) => {
  event.context.container = {
    resolve: () => {
      return 'ok'
    }
  }
})

I would like to "type" the event parameter, I would like my VSCode editor to be aware that the event parameter contains a context property that contains a resolve property that is a function that returns a string.

I tried extending the H3Event using the following:

declare module 'h3' {
  interface H3Event {
    context: Record<string, any> & {
      resolve: () => string
    };
  }
}

But Typescript gives me the following error:

Subsequent property declarations must have the same type. Property 'context' must be of type Record<string, any>...

Is there a way to define the context type of the event parameter in a server middleware?

[wobsoriano]

Try CompatibilityEvent instead of H3Event

declare module 'h3' {
  interface CompatibilityEvent {
    '__is_event__': true;
    event: CompatibilityEvent;
    req: IncomingMessage;
    res: ServerResponse;
    context: Record<string, any> & {
      container: {
        resolve: () => string
      }
    };
  }
}

[ElMatella]

Sweet, thank you very much!

[ElMatella]

So, I've managed to make it work as you said. However, I'm wondering if there is something to do on h3 part to simplify the process of what I did:

I had to create first a Context interface extending Record<string, any>:

// Declare Context interface to be able to extend it in middleware files
export interface Context extends Record<string, any> {}

// Overriding CompatibilityEvent to replace context: Record<string, any> by context: Context
import {IncomingMessage, ServerResponse, H3Event} from 'h3'

declare module 'h3' {
  interface CompatibilityEvent {
    '__is_event__': true;
    event: H3Event;
    req: IncomingMessage;
    res: ServerResponse;
    context: Context;
  }
}

After creating this file, I was able to extend the Context interface individually in my middlewares files:

// middleware/logger.ts
declare module '../utils/context' {
  interface Context {
    $logger: Console
  }
}

export default defineEventHandler((event) => {
  event.context.$logger = console
})

// middleware/service.ts
const service = {
  doSomething () {
    console.log('doing something')
  }
}

declare module '../utils/context' {
  interface Context {
    $service: typeof service
  }
}

export default defineEventHandler((event) => {
  event.context.$service = service
})

Is this the good way to do it? Implementing the Context interface on h3 part would simplify the process wouldn't it?

[wobsoriano]

@ElMatella the problem with that is that all your middleware will have the context type of each middleware

[pi0]

Thanks for the issue. I think we could introduce a new EventContext interface for easy extension. /cc @danielroe is this something you would like to work on?

---

Related:

• Allow typing event context #122