Template interpolation incorrect type on event (Typescript)

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: Windows
• Vetur version: 0.30.3
• VS Code version: 1.51.1

Problem

Vetur is reporting false error with "vetur.experimental.templateInterpolationService": true due to inccorect typing when passing a variable from an event, example:

  <!-- foo is computed property with return type number | undefined -->

  <div v-if="foo">
    <!-- foo now should be number  -->
    {{ foo }} <!-- Correct type (number) -->
    <input :example="foo" /> <!-- Also correct type (number) -->
    <input type="text" @input="bar(foo)" /> <!-- Incorrect type (number | undefined) -->
  </div>

Reproducible Case

<template>
  <div v-if="foo">
    <!-- foo now should only be number  -->
    {{ foo }} <!-- Correct type (number) -->
    <input :example="foo" /> <!-- Also correct type (number) -->
    <input type="text" @input="bar(foo)" /> <!-- Incorrect type (number|undefined) -->
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  get foo(): number | undefined {
    return 1;
  }

  bar(x: number) {
    return x * 2;
  }
}
</script>

[ktsn]

#1212

I’ve been thinking of this problem and there seem to be two approaches:

1. Change template transformer implementation to like what Angular does (use if statement and user defined type guard to generate context, in this case $event, instead of using helper function and callback) so that we can eliminate callbacks from transformed code.

https://medium.com/angular-in-depth/type-checking-templates-in-angular-viewengine-and-ivy-77f8536359f5

1. Assign all values in if condition into local variables so that we avoid type widening.

if (vm.foo.bar.baz) {
  const __foo = vm.foo
  const __foo_bar = vm.foo.bar
  const __foo_bar_baz = vm.foo.bar.baz

  {
    on: {
      input: $event => func(__foo_bar_baz)
    }
  }
}

The latter approach should be easier than the former but I’m not sure if it actually works properly. There might be some edge cases that I’m not aware of.

[yoyo930021]

Duplicate of #1212