feat(types): enhance the event type in defineEmits

[nooooooom]

closes vuejs/language-tools#3197

Enhance the event type in defineEmits so that it conforms to the triggering mechanism of emit.

For normal events, we allow them to contain camelized copies:

defineEmits(['value-change'])
->
{
  'value-change': () => void
  valueChange: () => void
}

For v-model update:xxx events, we allow them to contain hyphenate copies:

defineEmits(['update:modelValue'])
->
{
  'update:modelValue': () => void
  'update:model-value': () => void
}

It also filters the types that already exist and are defined in events:

defineEmits({
  'value-change': () => void
  valueChange: null
})
->
{
  'value-change': () => void
  valueChange: (value: any) => void
}

[yyx990803]

Thanks for the PR - could you please add type tests in https://github.com/vuejs/core/blob/main/packages/dts-test/setupHelpers.test-d.ts?

[nooooooom]

Thanks for the PR - could you please add type tests in https://github.com/vuejs/core/blob/main/packages/dts-test/setupHelpers.test-d.ts?

I'm planning to do this!

[nooooooom]

This feature is imperfect because I do not know how to change the parameter type for an overloaded function. 🤔

[nooooooom]

This feature is imperfect because I do not know how to change the parameter type for an overloaded function. 🤔

All usage scenarios are currently supported!

[yyx990803]

After testing this locally, it seems this doesn't actually fix vuejs/language-tools#3197 - the actual issue seems to be in Volar, not in the types of defineEmits.

The kebab-case and camelCase conversions are mostly meant for parent consumers. Locally, defineEmits should just keep the exact event names for consistency.

[nooooooom]

After testing this locally, it seems this doesn't actually fix vuejs/language-tools#3197 - the actual issue seems to be in Volar, not in the types of defineEmits.

The kebab-case and camelCase conversions are mostly meant for parent consumers. Locally, defineEmits should just keep the exact event names for consistency.

You're right! The format conversion accommodates how the template is written. For event firing, we supposedly need to keep the event names consistent.

[nooooooom]

The original intention of this PR is to keep defineEmits consistent in logic and type. Still, from the perspective of developing components, it will undoubtedly confuse the code specification of components.

I was going in the wrong direction for vuejs/language-tools#3197; we should enhance type hints on component usage in SFC.

[yyx990803]

I think we can agree to close this one then? Regardless, thanks for your effort on the PR 👍

[nooooooom]

I think we can agree to close this one then? Regardless, thanks for your effort on the PR 👍

I think so too. Thank you for your patience and strict control over the code design.

I learned quite a bit about TypeScript on this PR.