Can't use own type in `defineEmits` in new Vue 3.3 structure

[szulcus]

Work:

const emit = defineEmits<{
	close: [];
}>();

Don't work:

interface Emits {
	close: [];
}
const emit = defineEmits<Emits>();

Type 'Emits' does not satisfy the constraint '((...args: any[]) => any) | Record<string, any[]>'.
  Type 'Emits' is not assignable to type 'Record<string, any[]>'.ts(2344)

Previous structure works fine:

[jdk2pq]

Can confirm. Related: #3169 (comment)

[so1ve]

try using type Emits = ...?

[jdk2pq]

@so1ve That did the trick! Thank you for the suggestion. This works great:

type Emits = {
    someEmit: [value: string];
}

const emits = defineEmits<Emits>();
emits('someEmit', value);

I also had to disable the @typescript-eslint/consistent-type-definitions ESLint rule.

[so1ve]

Well that's a typescript limitation: microsoft/TypeScript#42825 but I think we can avoid it.

[so1ve]

@jdk2pq Could you please confirm if this works:

type Simplify<T> = { [K in keyof T]: T[K] } & {}

interface Emits { ... }

defineEmits<Simplify<Emits>>()

?

[jdk2pq]

@jdk2pq Could you please confirm if this works:

type Simplify<T> = { [K in keyof T]: T[K] } & {}

interface Emits { ... }

defineEmits<Simplify<Emits>>()

?

Yep, that's passing vue-tsc for me as well 👍

[so1ve]

Well this is not a fix (actually). The complex type cannot pass vue's compiler :( So, maybe a vue core's type problem? Can you try to import defineEmits from vue in a fresh ts file instead of a SFC and check whether this issue still exists? If so, that's a vue issue.

[jdk2pq]

@so1ve Sure thing. When I use the Simplify type, no issues:

But if I don't use that, I get the same type errors I was seeing before here #3169 (comment) :

No complaints when I use type Emits = { ... } either:

[so1ve]

OK! Now we can confirm this is a vue issue.

[so1ve]

Created an issue: vuejs/core#8457

[szulcus]

Thanks @so1ve !