Template interpolation incorrect type on event (Typescript)

[SuspiciousLookingOwl]

• 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>

[rchl]

This is the correct behavior.

The handler of the input event will be evaluated on entering the text in the input. That can happen at arbitrary times. So the value can be undefined at that point.

[SuspiciousLookingOwl]

So the @input can be triggered even though it's not rendered because of the v-if="foo"?

[yoyo930021]

So the @input can be triggered even though it's not rendered because of the v-if="foo"?

https://www.typescriptlang.org/play?#code/DYUwLgBAZg9jBcEB2BXAtgIxAJwgH2RWGAgF4IBGAKCoGMYkBnSetABzIgAoBKMgPggBvKhAgBLKN1gw+IsWJkA6AG4BDYChAB5KLxoKI9Ji2DjaAa068B0OKo1bd+sQF8q7qjM6piQA

[rchl]

So the @input can be triggered even though it's not rendered because of the v-if="foo"?

Good point I guess. It should theoretically not be possible to trigger the event handler if foo is undefined. But this relation might be too complex for a tool like Vetur (or Typescript) to understand.

[SuspiciousLookingOwl]

So the @input can be triggered even though it's not rendered because of the v-if="foo"?

https://www.typescriptlang.org/play?#code/DYUwLgBAZg9jBcEB2BXAtgIxAJwgH2RWGAgF4IBGAKCoGMYkBnSetABzIgAoBKMgPggBvKhAgBLKN1gw+IsWJkA6AG4BDYChAB5KLxoKI9Ji2DjaAa068B0OKo1bd+sQF8q7qjM6piQA

That's true for Typescript, but does Vue work the same?

Since I put <div v-if="foo"> so technically foo inside that div is not undefined, therefore the foo in @input="bar(foo)" is supposed to be not undefined. Unless it's possible for Vue to trigger the @input even though the component is not rendered because of the <div v-if="foo"> when the foo is undefined, which seems to be what you are trying to say.

[yoyo930021]

@ktsn what do you think about this?

[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

2. 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]

#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.

I think we can choose the latter one.
Just adjust as necessary.

[yoyo930021]

I will close this issue.
Please follow #1212

[yoyo930021]

Duplicate of #1212