While working with Vue 3 emit function and TypeScript, I encountered a strange error message. Here's an example code snippet to reproduce the issue:
export default defineComponent({
emits: {
emit1: (payload: number) => payload,
emit2: (payload: string) => payload
},
methods: {
...
}
}
When I call the emit1 as follows, it compiles without errors:
this.$emit("emit1", 1);
However, if I try the following, a weird error occurs:
this.$emit("emit1", "test");
TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type '"emit1"' is not assignable to parameter of type '"emit2"'.
Switching the order of emit functions leads to a different error that seems more sensical:
export default defineComponent({
emits: {
emit2: (payload: string) => payload,
emit1: (payload: number) => payload
},
methods: {
...
}
}
This error highlights that there is a mismatch between boolean and number types.
My Questions:
- Why does changing the order of the functions impact the error message?
- Is there a way to fix this inconsistency in Vue or is it possibly an issue with TypeScript itself?