vuejs/eslint-config-typescript

Check if function signature of event listener matches emitted event's signature

Opened this issue · 0 comments

Let's imagine, we have a component that emits a typed event

// MyComponent.vue
<script>
const emit = defineEmits<{
  (event: 'myCustomEvent', id: number): void
}>()
</script>

Here, it omits the id parameter. But I assume, we can't enforce that it'd be used here

<template>
  <MyComponent @myCustomEvent="myHandler(true)" />
</template>

But maybe in this scenario:

<template>
  <MyComponent @myCustomEvent="() => myHandler(true)" />
</template>
// error: Event myCustomEvent in MyComponent specifies required argument `id`, which is missing from your event listener's callback function signature

Would this be something natively supporting as a rule or would you say, this has to be a custom rule? If so, do you have any tips on how to write the rule for that particular case (fetching emit information from component used in template of another component)?