There is defineEmits in Vue 2.7 (composition API) We can use it that way:

const emit = defineEmit<{
(e: 'event-1', payload: number): void
(e: 'event-2', payload: string): void
}>()

and than use:

emit('event-1', 2)
emit('event-2', '2')

typescript understand types correctly

and when adding listeners in parent component

@event-1="(p: string) => console.log(p) //error p type should be number

vscode understands somehow parameters type

I wonder how it works, cause generic utility type "Parameters" always returns last overloading signature (event-2) as it's written in docs

So my question is: how to typefy function with function interface (not mapped types) that it understands parameter types correctly... something like that:

interface mySuperInterface{
(e: 'event-1', payload: number): void
(e: 'event-2', payload: string): void
}
function mySuperFunction<T extends (...args: any) => void>() {
return function() {
console.log(params)
}
const d = mySuperFunction<mySuperInterface>()
d('event-1', 1) // correct
d('event-2', 1) // not correct

tried to use Parameters utility type, but it uses infer, that takes last overloaded signature (event-2 in my case) I know how to do that with mapped types, but how it's done in defineEmits?

There is defineEmits in Vue 2.7 (composition API) We can use it that way:

const emit = defineEmit<{
(e: 'event-1', payload: number): void
(e: 'event-2', payload: string): void
}>()

and than use:

emit('event-1', 2)
emit('event-2', '2')

typescript understand types correctly

and when adding listeners in parent component

@event-1="(p: string) => console.log(p) //error p type should be number

vscode understands somehow parameters type

I wonder how it works, cause generic utility type "Parameters" always returns last overloading signature (event-2) as it's written in docs

So my question is: how to typefy function with function interface (not mapped types) that it understands parameter types correctly... something like that:

interface mySuperInterface{
(e: 'event-1', payload: number): void
(e: 'event-2', payload: string): void
}
function mySuperFunction<T extends (...args: any) => void>() {
return function() {
console.log(params)
}
const d = mySuperFunction<mySuperInterface>()
d('event-1', 1) // correct
d('event-2', 1) // not correct

tried to use Parameters utility type, but it uses infer, that takes last overloaded signature (event-2 in my case) I know how to do that with mapped types, but how it's done in defineEmits?

• typescript
• vue.js

1 Answer 1

I wouldn't mind just to assert:

Playground

function mySuperFunction<T extends (...args: any) => void>() {
  return function(...params: any) {
    console.log(params)
  } as T;
}

Intellisense is ok: