Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

defineEmits with typescript and union types raises a warning #7943

Closed
elfjes opened this issue Mar 22, 2023 · 3 comments · Fixed by #8299
Closed

defineEmits with typescript and union types raises a warning #7943

elfjes opened this issue Mar 22, 2023 · 3 comments · Fixed by #8299
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: compiler

Comments

@elfjes
Copy link

elfjes commented Mar 22, 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNpNUMtuwkAM/BXLF0CC5J4uqD30L3wJwcDS7ENrh6qi/Hu9SaX2tPbszHg0D3zLublPjB065ZDHXvlAEcAdJ9UU4XUY/fCxJ+Tgdb2SFHi1ITzMMAR27UI0kWv/OTgZis8KwjplGPt4MQ8VU1LUr8zwbn4CeyCsnoTwbWM9QvhCcUhRFOpqlBOffeRZ4B413Jq7Rb/p4J78yQQLSNjHpFcuhFu492MHosXHyx/veVhv7HHtks/S4BZ9yKnoLvS5uUmKVsZ8hn4/LHUHM1Ixa6vuhFfVLF3bynmoFd6kSeXS2tSUKaoP3LCE3bGkT+FixoTV4mkZ8PkDyDyALQ==

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;
}>();
@LinusBorg
Copy link
Member

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.

@elfjes
Copy link
Author

elfjes commented Mar 23, 2023

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.

@sxzz
Copy link
Member

sxzz commented Mar 23, 2023

You can try betterDefine in Vue Macros.

P.S. Sorry I didn't know the issue will be closed via cross-repo commit.

@sxzz sxzz reopened this Mar 23, 2023
@sxzz sxzz added scope: compiler 🔩 p2-edge-case has workaround A workaround has been found to avoid the problem labels Mar 23, 2023
sxzz added a commit that referenced this issue May 12, 2023
sxzz added a commit that referenced this issue May 12, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 10, 2023
topsmart20 added a commit to topsmart20/vue-macros that referenced this issue Dec 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: compiler
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants