after update to 0.32.1, component event has payload type error

[ysneo]

vue 2.6
volar update to 0.32.1
ts 4.5.5
I use elementui select component. it has change event , has payload error after volar update to 0.32.1;
(property) 'change': ((payload: Event) => void) | undefined Type '(item: any[]) => Promise<void>' is not assignable to type '(payload: Event) => void'. Types of parameters 'item' and 'payload' are incompatible.

[johnsoncodehk]

Could you also provide what is the old behavior in 0.32.0?

[ysneo]

I installed 0.32.0 VSIX, here is the old behavior; @johnsoncodehk

[NikhilVerma]

@johnsoncodehk I have a minimal reproduction here - https://github.com/NikhilVerma/vue-tsc-issue

My event emits a number, but the event prop is hardcoded to be Event as a payload.

[scrapstation]

+1

[sbarfurth]

Is there an estimate for a fix for this? It causes nearly all my components to show problems and is quite detrimental to efficient development.

[johnsoncodehk]

@barfurth please use 0.32.0 for now. I'm working on #1009 currently, this pr change all server code so I can't resolve other problem before merge it.

[johnsoncodehk]

@ysneo seems element-ui do not have valid events define in ElSelect class, it should have $props: { onChange: (arg: ARG_TYPE) => void } or $emit: { (e: 'change', arg: ARG_TYPE): void } for event type in https://github.com/ElemeFE/element/blob/473ef53f9317ad6ca8c629655982244902751e63/types/select.d.ts#L11.

If element-ui not going to support types, I recommend you to use Vetur as it built-in support intellisense for ElementUI in Vue2.

---

@NikhilVerma your component does not provide a valid type, try change it to

// Component.vue
<template>
  <div @click="selectTab">hello</div>
</template>

<script lang="ts">
import Component from "vue-class-component";

@Component
export default class Comp extends Vue {
  $emit!: { (e: 'select', value: number): any }
  selectTab() {
    this.$emit("select", 1);
  }
}
</script>

// Consumer.vue
<template>
  <Component @select="selectTab" />
</template>

<script lang="ts">
import Component from "vue-class-component";
import MyComponent from "./Component.vue";

@Component({
  components: {
    Component,
  },
})
export default class Consumer extends Vue {
  static components: { Component: typeof MyComponent }
  selectTab(value: number) {
    console.log(value);
  }
}
</script>

See #750 (comment).

[sbarfurth]

@johnsoncodehk I’m not sure this issue is addressed considering this was working before.

We can’t really expect every UI library to type their components? Also this would not work for dynamically registered components, because Volar wouldn’t know what to look for (e.g. Nuxt directory based imports)? Perhaps this is a separate issue.

[johnsoncodehk]

@barfurth it's changed in 99386be.
This issue is for invalid type components (no $props defined), so now I'm just rolling back to the previous behavior for invalid type components.

For dynamically components, see #682 (comment).