Vue 3 + Typescript: "setup" function breaks emits typing

[iliubinskii]

Version

3.0.0

Reproduction link

github.com

Steps to reproduce

1. Clone reproduction repository
2. Run "validate" script: npm run validate
   OR
   open Sample1.ts and Sample2.ts in Visual Studio Code.

What is expected?

I expect to see two errors:

One from

emit("wrong-event-name");

in Sample1.ts

And another one from

this.$emit("wrong-event-name");

in Sample2.ts

What is actually happening?

I see only one error - from Sample2.ts

---

In Sample2 defineComponent correctly determines emits type as:

{
    event(): boolean;
}

In Sample1 it uses EmitsOptions type because of _props and { emit } args.

If you remove args, emits type is determined correctly, but in this case you will not have access to emit function which is not suitable.

[LinusBorg]

I think this is about the same TS limitation we have with props validator functions: they either need to be arrow functions or have this typed to undefined explicitly. Both of these work fine:

emits: {
   // arrow function
   event: (): boolean => { return true; }
  // explicit this
  event(this: undefined): boolean { return true; }
},

I'll submit a change to the docs adding a similar note like we have for props validators and will close the issue afterwards.

We should also consider to add an eslint rule for this (in case it doesn't exist yet).

[iliubinskii]

Thx for the help.

Both fixes worked.

ESLint rule would be great. It should probably replace this ESLint core rule - "object-shorthand".

[posva]

Can you open an issue on vuejs eslint repo if there isn't one yet?