How to type emit if passed to external function?

[frederikheld]

Hey everyone,

I'm passing the emit that I have defined in a component to an external function. This function creates map markers on an interactive map and clicking a marker should emit an event.

// Vue component:
<script setup lang="ts">
import { markerFactory } from './my-lib/markerFactory' 

export interface Emits {
  (e: 'do-something', value: void): void
}

const emit = defineEmits<Emits>()

const marker = markerFactory(emit)
</script>

// ./my-lib/markerFactory function:
import type { Marker } from 'someMappingLibrary`

export function markerFactory (emit: any): Marker {
  const marker: Marker = new Marker()
  marker.addEventListener('click', () => emit('do-something'))
  return marker
}

It works. Clicking the marker emits the do-something event.

But as you can see, I typed the emit parameter as any because the function doesn't know anything about the Emits interface that I have defined in the component.

So how would I type this right?

Thanks in advance.

EDIT: I would actually prefer to pass only the emit that should be emitted to the markerFactory function. How would I do that?

[frederikheld]

Okay. I found a better way to do this. Instead of passing the whole emit function or find a way to pass only the emit I want to be emitted into the makerFactory, I instead pass a onClickCallback that calls the emit('do-something'). This way the emit stays in the component and the parameter can be properly typed. This way it is also super easy to pass values to the emit.

// Vue component:
<script setup lang="ts">
import { markerFactory } from './my-lib/markerFactory' 

export interface Emits {
  (e: 'do-something', value: string): void
}

const emit = defineEmits<Emits>()

const marker = markerFactory((markerName: string) => emit('do-something', markerName))
</script>

// ./my-lib/markerFactory function:
import type { Marker } from 'someMappingLibrary`

export function markerFactory (onClickCallback: (markerName: string) => void): Marker {
  const marker: Marker = new Marker({
    name: 'Foo'
  })
  marker.addEventListener('click', () => onClickCallback(marker.name))
  return marker
}