Event type bug in template

[kingyue737]

Reproduction: https://github.com/kingyue737/volar-event-bug

1. Clone the repo and run pnpm install
2. Find the error in App.vue

Event event-any is defined with arg: any but volar thinks the type of handler should be (arg: string) => void
It seems this issue happens when one of the events has an argument typed as any

const emit = defineEmits<{
  (e: "event-any", arg: any): void;
  (e: "event-str", arg: string): void;
}>();

While volar extension shows ts error in template, vue-tsc doesn't complain about such issue.

Environment

• Volar: 0.40.13
• Vue: 2.7.10
• VSCode: 1.71.0
• Typescript: 4.8.3 (in takeover mode)

[johnsoncodehk]

Thanks for the report! It seems a TS problem, I have no idea how to resolve for now.

https://www.typescriptlang.org/play?target=2&module=1#code/KYDwDg9gTgLgBDAnmYcCiBbAljNA3YAOxgCYAeAMQBp0A+OAXgFgAoASArlBiIBMBnOAG9WbNgApgBYgC50NAHRKwAQ0QAbCCt5yshAGbAocAAoBKXQaNwASqIC+cAPxxxShao1adps43p4EFi8onKc3HyCIuwSUkQwcmiKymqa2paGxuYZ1nYxbkoqUADm-HIqhIgWcBWIDs6u7p5pPub+cIHBoXDhIDyEAsKisdIJ8nBNqd45WdV6mbbDBQpFpeWV1bVL7qtlNRvrdeyOLsvN077tnSHsYVx9kUP5cbLjk17pcPPW2V9WxnkxMtdodNpVtoUSntamCjkCdlDQYd6qd3i05G0GAEgjc2HIAK6EADWhAgAHdCHAAD5wADkAG0ACrIVAAdSKhD0xQAunAAGoQdRFOAAYwg+PUvDgpPg32MABJgNh4C94BhoKgYAALCpwAAscAgBCgLUEZJwWvF8AAIsB9HpgABhCAYSCEeIKOD8YCoLUwGBgMoAeiDxQt+IARgoxRggwArCBawj8CCEMW8YBaolBwJCqBBrD8fj44D8IMANgADLSANysVghuB+gPBoP8GAqEVEo1GfSaMnRl1BlRBgCsAGYAByVyckACMJFYSBQcAAkvo0ABHfEqdT8MiMmgAVRoAE1GHBCSTyYQaAA5C-u430ZjscRkADitHEfixcA-9z9IMjINHOcByCQfgRAM-CiO+X4-u0AHQYMR6geBcCQQ055yHedYsBmIp5qg+iEiKMBYKm9ydjAzIoAex7frwUAqPoYwgQAZGuG7bru+6HnAR60DQoAoORwA+GhXHrluO57gxgm0NUMm8fJAlCfhDZBn8YpQFAwDkXAAC0cDmtq+xHKwoA0XRwDiEIjgqIImA4Pg8TkNEIzxHIABEqpGbUPk0KsSIdDicGqr5-ntlAQU1CUcgxVy1TXKw9g0LS-m1LSwnCI5gjiCFFm-tiwRmPh1nkbZ9n5egypucQHkRaMUWjEZMVxUVSWEMUKXhW+kVwH5bWBcFCXFXIqUsOldLRTAUA5TQDk1AVXXzclVw4uV9YsI2un6YZJlmZa+LwFsLBWSANksjVK11a5oxNQNLVDf5hD4hgnXje9GARkYfVdM93mvW1HVjcUiXrT1AM3DNmVtT9i15XdhXfR9f1QCVYVlRVV1VTdy1OfduCPWQnmSC9w3xO181fRDXpQ71k39V5rxU8QRk-XTcg-RjMNpRlc0LblhOreN3W9ZtOOsEAA

[edikdeisling]

Faced the issue too. There is a weird hack

const emit = defineEmits<{
  (e: "event-any", arg: any): void;
  (e: "__", arg: any): void; // this line fixes the issue
  (e: "event-str", arg: string): void;
}>();

[vidal7]

@johnsoncodehk asked me to post my use case related to this issue.

In Vue 2.7, options API (defineComponent), TS 5, Volar 1.6.1, type of event is wrong in VSCode

It should have been

'event-without-payload': ($event?: undefined) => void

Also, it would have been nice that Volar throw a typescript error on handleEventWithPayload in the template has handleEventWithPayload does not satisfy the type (a: number, b: boolean) => void has defined in the p-component-issue

emits: {
            'event-without-payload': (): void => { },
            'event-with-payload': (a: number, b: boolean) => { }
        }

For reproduction repo, you can take the same as the issue 2742 (https://github.com/vidal7/volar-issue-2742)