vue升级3.5.9之后, typescript版本选择5.4.5, vue组件事件报错

[beishuangzz]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.93.1

Vue version

3.5.9

TypeScript version

5.4.5

System Info

No response

package.json dependencies

"dependencies": {
    "vue": "^3.5.9"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.2.0",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }

Steps to reproduce

typescript版本设置为5.4.5, vue升级到3.5.9 定义一个组件, 定义事件, 数量为9个

<template>
    <div></div>
</template>

<script lang="ts" setup>

defineEmits<{
    (e: 'event01', value: string): void
    (e: 'event02', value: string): void
    (e: 'event03', value: string): void
    (e: 'event04', value: string): void
    (e: 'event05', value: string): void
    (e: 'event06', value: string): void
    (e: 'event07', value: string): void
    (e: 'event08', value: string): void
    (e: 'event09', value: string): void
}>()
</script>

使用这个组件

<template>
  <div class="common-approval-page">
      <ComponentA
          ref="formRef"
          @event01="event"
      />
  </div>
</template>

<script lang="ts" setup>
import ComponentA from './ComponentA.vue';

const event = (a: string) => {

}

</script>

发现提示 Types of parameters 'a' and 'args' are incompatible

但如果组件的事件减少到8个, 就不会报错

<template>
    <div></div>
</template>

<script lang="ts" setup>

defineEmits<{
    (e: 'event01', value: string): void
    (e: 'event02', value: string): void
    (e: 'event03', value: string): void
    (e: 'event04', value: string): void
    (e: 'event05', value: string): void
    (e: 'event06', value: string): void
    (e: 'event07', value: string): void
    (e: 'event08', value: string): void
    // (e: 'event09', value: string): void
}>()
</script>

What is expected?

解决这个问题

What is actually happening?

组件事件不正确的报错

Link to minimal reproduction

https://github.com/beishuangzz/vue-test

Any additional comments?

No response

[KazariEX]

我在本地和 SFC Playground 均无法复现这个问题。

https://play.vuejs.org/#eNqdk29r2zAQxr/KoTdJIXW2dd1WzwnrRgbbi210fSkowj67amVJSLIbKPnuPSl1EugfTP1Kufud7vTck3t2bm3Wd8hyVgRsrRIBl1wDFJXsoVTC+wVnpWlbo4+Ftc70Qh1b0SBniYtf8cO01mjU4XwIxc9hTbW1ce0F1pwdpr5hT/S795RPp312vu0+p/Z0KuYHQ9FPXzppAyihGyoNnjPwGDpLWUkjuAD7UaB2poVJNo+h+MbJ13hHabQPkLrCAqYiBx+c1M0RLJZwH4lN7LvtRPeyGfWholo22Y03mpQiCiCpYqVC99cGSZdylsf6+AjOhFLm7neKBdfhbIiX11jePhO/8esY4+yfQ4+uJ3l3uSBcgyRRTK/+/8E1nXfJ1lSdIvqV5AV6o7o44xb73umKxj7g0rS/koCkxKVfrQNqPzwqDhrJTeI5IymjpC89fT/uSXaa6khSUnFYwxOrbc22fMPOcZ12LnVAV4sS4SeZbdXK4IdxppjD5NFskxmQeTuKPG48h97I6gn4YSx4Mhb8OBY8HQt+Ggt+Hgt+GQuevQjSoiuspca0gmK3jOX06OAvRVa46tFFe5EVyCPZGds8ADxodiA=

[beishuangzz]

我在本地和 SFC Playground 均无法复现这个问题。

https://play.vuejs.org/#eNqdk29r2zAQxr/KoTdJIXW2dd1WzwnrRgbbi210fSkowj67amVJSLIbKPnuPSl1EugfTP1Kufud7vTck3t2bm3Wd8hyVgRsrRIBl1wDFJXsoVTC+wVnpWlbo4+Ftc70Qh1b0SBniYtf8cO01mjU4XwIxc9hTbW1ce0F1pwdpr5hT/S795RPp312vu0+p/Z0KuYHQ9FPXzppAyihGyoNnjPwGDpLWUkjuAD7UaB2poVJNo+h+MbJ13hHabQPkLrCAqYiBx+c1M0RLJZwH4lN7LvtRPeyGfWholo22Y03mpQiCiCpYqVC99cGSZdylsf6+AjOhFLm7neKBdfhbIiX11jePhO/8esY4+yfQ4+uJ3l3uSBcgyRRTK/+/8E1nXfJ1lSdIvqV5AV6o7o44xb73umKxj7g0rS/koCkxKVfrQNqPzwqDhrJTeI5IymjpC89fT/uSXaa6khSUnFYwxOrbc22fMPOcZ12LnVAV4sS4SeZbdXK4IdxppjD5NFskxmQeTuKPG48h97I6gn4YSx4Mhb8OBY8HQt+Ggt+Hgt+GQuevQjSoiuspca0gmK3jOX06OAvRVa46tFFe5EVyCPZGds8ADxodiA=

我在执行type-check时也能复现

[KazariEX]

你可以使用具名元组语法缓解这个问题：

[beishuangzz]

我试试

[KazariEX]

注意这样做不能单独声明接口类型，不确定是不是另外的 bug，你可以向 https://github.com/vuejs/core 报告。