Skip to content

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

@Sengulair

Description

@Sengulair

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood reproduction ✨This issue provides a good reproduction, we will be able to investigate it first

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions