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

Missing typing for emmited event for generic components which define different casing style #3197

Closed
Sengulair opened this issue May 15, 2023 · 4 comments
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@Sengulair
Copy link

Sengulair commented May 15, 2023

Vue version

3.3.2

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-hjlpod?file=src/App.vue&view=editor

Steps to reproduce

  1. Open a new Terminal after successful setup of dependencies
  2. type and run npm run typecheck into the terminal
  3. See an error in App.vue file about any type for the argument of the @update:model-value emit

What is expected?

Types for emits are inferred correctly in the template for generic components. So for defined

defineEmits<{ 
  (e: 'update:modelValue', value: ComponentReturnType<T>): void;
}>();

inside the component, both event listeners (@update:model-value and @update:modelValue) should be valid like it works for components without generic.
This will be better for consistency between generic and non-generic components and kebab-case follows the recommendation of writing emits in a template.

What is actually happening?

The generic component only knows the emit type with the same casing style that is defined inside of this generic component. So as for the repro link typescript can't see the kebab-case subscription on the event with the defined camelCase emit inside the component.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 3.86 GB / 15.92 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.42)
  npmPackages:
    vue: ^3.3.2 => 3.3.2

Any additional comments?

Recommendations in the vue documentation say that using camelCase for defining props/emits and kebab-case for props/listeners is recommended way, also eslint-plugin-vue has the same recommendations, so it's a regular error if using these recommendations.

@nooooooom
Copy link

I think this should be consistent with Vue's event trigger logic:

image

@yyx990803
Copy link
Member

Discussed with @johnsoncodehk and this can be fixed on Volar side.

@yyx990803 yyx990803 reopened this May 18, 2023
@johnsoncodehk johnsoncodehk added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first labels May 18, 2023
@so1ve
Copy link
Member

so1ve commented Oct 1, 2023

It should work in latest release, could you please check? @Sengulair

@Sengulair
Copy link
Author

@so1ve Yes, thanks for noticing and paying attention. I tested with the latest version, and it works as expected. I think we can close the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants