Incomplete type narrowing in event handlers

[abaumg]

It seems that vue-tsc cannot narrow types in event handlers, e.g. when checking for null.

In the following demo code, Volar infers the the correct type (User) in the template expression (mustache tag), but not in the click handler.

  <div v-if="user !== null">
    <h1 @click="doSomething(user.email)">
      user's emailAddress: {{ user.email }}
    </h1>
  </div>
</template>

<script setup lang="ts">
type User = {
  id: number;
  email: string;
}

let user: null | User;

function doSomething(email: any) {
  console.log(email);
}
</script>

vue-tsc incorrectly complains about Object is possibly 'null'. ts(2531) in line 3 (@click="..."), ignoring the null check (user !== null) in the line above.

[austin-agronick]

The issue also effects v-if/else logic as well. For example this code will result in vue-tsc errors: let user2: string | User and <span v-if="user2.id">({{ user2.id }})</span>. "Property 'id' does not exist on type 'string | User'"

For a live example see: https://stackblitz.com/edit/vue3-typescript-vue-cli-starter-zkvkhm?file=src/components/HelloWorld.vue

[johnsoncodehk]

Use vueCompilerOptions.experimentalAllowTypeNarrowingInInlineHandlers.

{
  "vueCompilerOptions": {
    "experimentalAllowTypeNarrowingInInlineHandlers": true
  }
}

[abaumg]

For the sake of completeness: This seems to be resolved in #1249