defineEmits with typescript and union types raises a warning
Vue version
3.2.47
Link to minimal reproduction
Steps to reproduce
click the button that says click me
What is expected?
some event is emitted without warning
What is actually happening?
A warning is raised Component emitted event "some" but it is neither declared in the emits option nor as an "onSome" prop.
System Info
No response
Any additional comments?
The warning is only raised due to the presence of another defined event. If the another event is not defined, the some event is registered properly. ie the following works properly:
type Emits = "some" | "emit";
const emit = defineEmits<{
(e: Emits): void;
}>();
The warning is only raised due to the presence of another defined event. If the another event is not defined, the some event is registered properly. ie the following works properly:
Not exactly. When you remove "another", no event is being registered at all (check the generated JS tab on the right). what however would work currenty, is writing the union inline:
const emit = defineEmits<{
(e: "some" | "emit"): void;
(e: "another", val: string): void;
}>();
So this is a current compiler limitation where it does not resolve type aliases used in event names.
I see, thanks for clearing that up :). I guess for now I'll just live with the warning, or maybe I'll disable it, since I'm importing the Emits type from another module and don't want to duplicate it.
Maybe at some point the compiler will pickup on union types, but no rush. Typescript provides enough safety for me to be comfortable with the current behaviour.
You can try betterDefine in Vue Macros.
P.S. Sorry I didn't know the issue will be closed via cross-repo commit.