-
-
Notifications
You must be signed in to change notification settings - Fork 481
Description
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
- Open a new Terminal after successful setup of dependencies
- type and run
npm run typecheck
into the terminal - See an error in
App.vue
file aboutany
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.