v-if not properly guarding types inside the same element.

[maxbogue]

Given a button like

<button v-if="foo && !buttonDisabled" @click="onSelect(foo)">
  {{ buttonText }}
</button>

where foo can be Foo | null and with onSelect expecting a Foo I get:

error TS2345: Argument of type 'Maybe<Foo>' is not assignable to parameter of type 'Foo'.
  Type 'null' is not assignable to type 'Foo'.

36         <button @click="onSelect(foo)">

Not sure the state of this repo, but given how amazing this tool is otherwise I figured I'd report it!

[johnsoncodehk]

hi @maxbogue, thanks for your report! And this is expected behavior because in compiled code, onSelect(foo) is compiled to $event => { onSelect(foo) }.

See: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuPGJ1dHRvbiB2LWlmPVwiZm9vICYmICFidXR0b25EaXNhYmxlZFwiIEBjbGljaz1cIm9uU2VsZWN0KGZvbylcIj5cbiAge3sgYnV0dG9uVGV4dCB9fVxuPC9idXR0b24+XG48L3RlbXBsYXRlPiJ9

Related: vuejs/vetur#2504

[maxbogue]

It is certainly not expected behavior from anyone trying to use vue-tsc. You listed the underlying cause; is there a fix planned? Seems like vuejs/vetur#1212 might be tracking that?

[johnsoncodehk]

@maxbogue this is just to point out the reason, Vetur may not confirm the correct behavior yet, but in Volar this is design, because this behaves is consistent to typescript:

let foo: string | undefined;
if (foo) {
  ($event: any) => onSelect(foo) // Argument of type 'string | undefined' is not assignable to parameter of type 'string'.ts(2345)
}
function onSelect(foo: string) { }

[maxbogue]

I understand that the behavior is consistent with the TypeScript as you have written it there (and the template compiler produces). My point is that from a developer perspective writing a Vue template, it's very unexpected and frustrating to receive this error. The reason it's not the same as the code you wrote there in practice is that ($event: any) => onSelect(foo) is impossible to call if foo is false (because the entire DOM node is removed). I'm not sure how to represent that with compiled TypeScript (I think there are more ideas in the other threads), but the point is that this is an important use case that any project hoping to fully type Vue templates should address.

[johnsoncodehk]

(Move the vue-tsc issue to volar Discussions, sorry if it causes confusion.)

Do you think we should throw error on this code?

<button v-if="foo" @click="($event) => onSelect(foo)" />

Actually vue event expression is syntactic sugar to the above code, so we should keep this two line has consistent behavior.

<button v-if="foo" @click="onSelect(foo)" />
<button v-if="foo" @click="($event) => onSelect(foo)" />

I believe a catch is that the event expression does not look like a callback function.

My point is that from a developer perspective writing a Vue template, it's very unexpected and frustrating to receive this error.

I totally agree. However, the correctness of type checking behavior is more important than user experience, especially for infrastructure facilities such as vue-tsc. The correctness here refers to exactly the same behavior as TypeSciprt.

The reason it's not the same as the code you wrote there in practice is that ($event: any) => onSelect(foo) is impossible to call if foo is false (because the entire DOM node is removed).

This is essentially a TypeScript problem. In principle, TypeScript can also narrow the type of this code, because if foo is undefined, the arrow function will not be defined. But they didn't do this, I hope TypeScript can be implemented in the future, and then I will update vue-tsc immediately.

[maxbogue]

TS doesn't narrow the type in that code because it can't control when the function is called. The function could be bound to a variable and called at any arbitrary time when the type guard is no longer applicable.

This is fundamentally different from the template scenario because the function produced is bound to the template node and can only be called from within it. Since the v-if controls the existence of the node, the type narrowing is safe to propagate to the function.

[johnsoncodehk]

TS doesn't narrow the type in that code because it can't control when the function is called. The function could be bound to a variable and called at any arbitrary time when the type guard is no longer applicable.

I see. :)

This is fundamentally different from the template scenario because the function produced is bound to the template node and can only be called from within it. Since the v-if controls the existence of the node, the type narrowing is safe to propagate to the function.

I think vue event expression narrow type also can be unsafe, for example:

// child.vue
<script>
import { onUnmounted } from 'vue';

export default {
  setup(props, { emit }) {
    onUnmounted(() => emit('unload'));
  }
}
</script>

// parent.vue
<template>
  <button @click="foo = undefined">click {{ foo }}</button>
  <child v-if="foo" @unload="onSelect(foo)" />
</template>

<script lang="ts">
import { ref } from 'vue';
import child from './child.vue';

export default {
  components: { child },
  setup() {
    let foo = ref<string | undefined>('foo');
    return { foo, onSelect };
    function onSelect(foo: string) {
      console.log(foo);
    }
  }
}
</script>

[maxbogue]

Oof, that's an unfortunate edge case. I didn't know components could emit as they were unmounted.

In that case, what are the options for making this pattern more ergonomic? Right now I have

<button v-if="foo" @click="foo && onSelect(foo)">Text</button>

As the workaround but I'm not sure whether there's a better option. Is there any way to suppress TS errors in the templates right now?

[johnsoncodehk]

I didn't know components could emit as they were unmounted.

I doubt it too, but the answer is yes I just tried it. 😅

In that case, what are the options for making this pattern more ergonomic?

You can also use onSelect(foo || '') or @ts-ignore:

<button v-if="foo" @click="() => {
  // @ts-ignore
  onSelect(foo)
}">Text</button>

But your foo && onSelect(foo) is better I think.

[johnsoncodehk]

Track: vuejs/core#1359

If vue support TS in template, we will have this choose: @click="onSelect(foo!)"

[maxbogue]

That would be amazing! Thanks for this discussion; I'm sad that such a strange edge case makes it impossible to do what I was expecting but at least now I know why. I'm excited to see where vue-tsc goes!

[johnnyshankman]

Just want to say this was a fascinating conversation and I learned a lot from it!

I had never considered even the most basic case that is always invalid:

<div v-if="returnsNullOrAnObject(data)">
  <img :src="returnsNullOrAnObject(data).anyProperty">
</div>

This will never pass typechecking as each call to the function returnsNullOrAnObject could oscillate between returning an object or returning null. Only the developer knows what to expect. The correct way to refactor this logic instead of using ?. is to use computed. That way the return value is static for the entire render, allowing TS to know each reference is safe after the v-if.

get returnsNullOrAnObjectComputed (): SomeObject | null {
    return this.returnsNullOrAnObject(this.data);
}

returnsNullOrAnObject (collector: Collector): SomeObject | null {
  ...
}

Now in your template you can safely do this instead to achieve what you originally wanted:

<div v-if="returnsNullOrAnObjectComputed">
  <img :src="returnsNullOrAnObjectComputed.someProperty">
</div>

In general my new motto is

in typescript vue do not use inline function calls to narrow the type with v-if . refactor to use a computed property. that way the value is static throughout the render