How do I get the type of emit?

[frederikheld]

I'd like to pass component events through a function that does other stuff before it emits the event.

This is my working TypeScript code:

const emit = defineEmits(['foo', 'bar'])

function emitEvent(eventName: 'foo' | 'bar') {
  // do other stuff here

  emit(eventName)
}

Explicitly naming 'foo' | 'bar' in both places is duplication that I'd like to get rid of. I tried to type the function parameter like this name: typeof emit but it does not work.

How would I correctly get the type of the emit events?

[Alfred-Skyblue]

You can try using the following method:

const emit = defineEmits(['foo', 'bar'])

function emitEvent(eventName:Parameters<typeof emit>[0]) {
  // do other stuff here

  emit(eventName)
}

[frederikheld]

Awesome, this works. Can you please explain what it does? I'm fairly new to TS.

[Alfred-Skyblue]

See https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype

[jacekkarczmarczyk]

function emitEvent(eventName:Parameters<typeof emit>[0]) {

Should probably use all parameters, not just the first one

[Cheerwhy]

@Alfred-Skyblue What if i want to get the type of emits out of the .vue file?
defineEmits can only write in <script setup>

[sadeghbarati]

You can use component-type-helpers or this #9556 once it's get merged

[Y80]

You can use component-type-helpers or this #9556 once it's get merged

Can Vue 2.7.x use it?