Cannot type $emit on class style components

[sbarfurth]

As mentioned in #1061 (comment) it seems it is currently not possible to type $emit using the method suggested in #750 (comment). The base interface uses a this return type and assigning void gives a TypeScript error that an arbitrary type can be passed.

Is there updated methodology for this? Or is this something that has fallen out of favor?

[johnsoncodehk]

Hi @barfurth, I'm not really understand the problem, could you provide a complete code sample?

Just in case, make sure you have at least define a empty object type for $props to make to component is a valid JSX element. So it will not show red color in other components.

[sbarfurth]

Certainly @johnsoncodehk, I added a component that is based entirely on #750 (comment) linked above.

Here is the component: https://github.com/barfurth/volar-no-types-repro/blob/main/components/HelloWorld.vue

The auto-completion works with this, but it does not compile. When you open the component the $emit part is marked as an error.

Property '$emit' in type 'HelloWorld' is not assignable to the same property in base type 'object & Record<never, any> & Vue'.
  Type '{ (e: "my-event-1"): void; (e: "my-event-2", arg1: string, arg2: number): void; }' is not assignable to type '(event: string, ...args: any[]) => this'.ts(2416)

There seems to be some problem with this assignment. The $props and the $scopedSlots work perfectly. This is related to the Vue interface definition of $emit I believe.

interface Vue {
  // ...
  $emit(event: string, ...args: any[]): this;
  // ...
}

[johnsoncodehk]

@sbarfurth just have a quick look, you could change this code to avoid error, but I'm not sure will it effect other types.

  $emit!: {
-    (e: 'my-event-1'): void
-    (e: 'my-event-2', arg1: string, arg2: number): void
+    (e: 'my-event-1'): any
+    (e: 'my-event-2', arg1: string, arg2: number): any
  }