Passthrough events don't allow undefined handlers

[KaelWD]

Volar 1.6.4
Vue 3.3.0-beta.3

Related to #2700?

<template>
  <v-container>
    <Test @click="onClick" />
    <!--   ^^^^^ Type '(() => void) | undefined' is not assignable to type '(...payload: any[]) => void' -->
  </v-container>
</template>

<script setup lang="ts">
  import Test from './Test.vue'

  declare const onClick: (() => void) | undefined
</script>

// Test.vue
<template>
  <div></div>
</template>

<script setup lang="ts">
  defineEmits<{}>()
</script>

If the emit is defined it passes:

defineEmits<{
  (event: 'click', e: Event): void
}>()

[johnsoncodehk]

This is a use case that requires unambiguous type behavior.

const Test = defineComponent({ emits: {} });
const emit = (new Test).$emit;
//    ^? (event: string, ...args: any[]) => void
declare const onClick: ConvertEmitToEvent<typeof emit, 'click'>;
//            ^? should it be `(...args: any[]) => void`?
//               or `((...args: any[]) => void) | undefined`?
//               or `((...args: any[]) => void) | undefined | null`?

type ConvertEmitToEvent<T> = ...

I think @click="onClick!" is a technically sound solution.

[KaelWD]

Is | undefined not possible? Vue adds undefined to events from defineEmits.

[xiaoxiangmoe]

temp solution: <Test @click="onClick?.()" /> 😂

[johnsoncodehk]

After some thought, it should accept undefined as long as it's optional.