Types don't seem to be narrowed inside of event handlers

[shroudedcode]

Volar already does a good job at narrowing types (from T | undefined to just T) inside of text interpolations ({{ ... }}) and attribute bindings (like :example="...") that are in some way wrapped in a v-if (or another "control flow directive"), but it doesn't seem to do any type narrowing for expressions inside of event handlers (like @example="...").

Here's a small component for reproducing the issue:

<script setup lang="ts">
import { ref } from 'vue'

const foo = ref<{ bar: 'Hello' }>()
</script>

<template>
  <div>
    <!-- `foo` properly narrowed inside of the curly braces -->
    <div v-if="foo">
      Test 1: {{ foo.bar }}
    </div>

    <!-- `foo` properly narrowed inside of `:title` -->
    <div v-if="foo" :title="foo.bar">
      Test 2
      <!-- Also works here -->
      <span :title="foo.bar">Test 2 nested</span>
    </div>

    <!-- `foo` still possibly `undefined` inside of `@click` -->
    <div v-if="foo" @click="alert(foo.bar)">
      Test 3
      <!-- Same problem here -->
      <span @click="alert(foo.bar)">Test 3 nested</span>
    </div>
  </div>
</template>

Apart from tiny issues like this Volar works really well for me by the way, keep up the great work! 🙌

[johnsoncodehk]

This is expected behavior, some discussion here: #146

[shroudedcode]

Ah, makes sense! Guess I'm waiting for TypeScript support in templates then. 😄

[abaumg]

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