v-on/@ syntax incompatibility with type narrowing

[Phlogistique]

There is an ergonomic issue when combining TypeScript type narrowing with Vue's v-on event handlers in templates. When using v-if to narrow a nullable value, there is no way to use the variable with its narrowed down type inside an event handler, if you also want to use the other arguments passed to emit by the child component.

Motivating example: I have an element that displays a list of items, and when I select an item, a slider to change an item's property:

<script setup lang="ts">
interface Item {
  id: number
  name: string
  size: number
}

const items = ref<Item[]>([
  { id: 1, name: 'First item', size: 10 },
  { id: 2, name: 'Second item', size: 20 },
])
const currentItem = ref<Item | null>(null)

function updateItemSize(item: Item, newSize: number) {
  console.log(`Updating ${item.name} to size ${newSize}`)
}
[...]
</script>
<template>
  <div v-if="currentItem">
    <SliderInput @change="(newSize) => updateItemSize(currentItem, newSize)"/>
    <!-- Argument of type 'number | null' is not assignable to parameter of type 'number'. -->
  </div>
</template>

This happens because there is no way to tell TypeScript that the function will not be called outside the type-narrowed scope.

Standard workarounds that feel wrong

We can force it to work with non-null assertions or runtime checks:

<div v-if="currentItem">
  <!-- Using non-null assertion - bypasses TypeScript -->
  <SliderInput @change="(newSize) => updateItemSize(currentItem!, newSize)"/>
  
  <!-- Runtime check - redundant with v-if -->
  <SliderInput @change="(newSize) => {
    if (!currentItem) throw new Error('impossible');
    updateItemSize(currentItem, newSize)
  }"/>
</div>

Where v-on throws a wrench in the works

A somewhat natural solution would be to capture the narrowed type in a constant; but that does not work as the Vue compiler syntactically detects a statement, and never calls the returned function.

<div v-if="currentItem">
  <!-- Oops: Vue executes this as a statement, never calls returned function -->
  <SliderInput @change="
    const item = currentItem;
    return (newSize) => updateItemSize(item, newSize)
  "/>
</div>

Trying to use partial application yields the same result:

import partial from "lodash/partial"

<div v-if="currentItem">
  <!-- Oops: Vue executes this as a statement, never calls returned function -->
  <SliderInput @change="partial(updateItemSize, currentItem)"/>
</div>

Alternative workarounds

1. Use v-bind instead of v-on. If instead of emitting a change event my child component takes an onChange callback as a prop, you can successfully pull the "partial" trick above.

<div v-if="currentItem">
  <SliderInput :onChange="partial(updateItemSize, currentItem)"/>
</div>

2. Use v-for to introduce a new variable. Hack-ish, and now I need a :key

<div v-if="currentItem" v-for="item in [currentItem]" :key="item.id">
  <SliderInput @change="(newSize) => updateItemSize(item, newSize)"/>
</div>

Or with a helper:

function maybeToArray<T>(x: T | null): T[] {
  return x === null ? [] : [x]
}

<div v-for="item in maybeToArray(currentItem)" :key="item.id">
  <SliderInput @change="(newSize) => updateItemSize(item, newSize)"/>
</div>

What I would like

I can imagine a world where, if you pass to v-on an expression that resolves to a function, it would get called by Vue when the event is received. That would make the partial trick above work.

Another solution would be for Vue to put some magic $args variable in scope in v-on, that contains the arguments to the emitted event.

[posva]

It would be nice to have this. I would add that the best workaround is to use the ! TS suffix:

<div v-if="currentItem">
  <SliderInpput @change="(newSize) => updateItemSize(currentItem!, newSize)"/>
  <!-- Argument of type 'number | null' is not assignable to parameter of type 'number'. -->
</div>

Playground

[Phlogistique]

I would say I prefer an explicit throw to the ! suffix; as in case the code moves around and the previously impossible case becomes possible, I will get an error at the call site rather than at some deeper stack frame.

[HerringtonDarkholme]

IMHO this is not a Vue-specific issue but rather a TypeScript problem.

Consider this code

let maybeNumber: number | null = null

declare function on(f: () => void): void 
if (maybeNumber) {
  on(() => {
    maybeNumber.toExponential() // error here
  })
}

TypeScript will report 'maybeNumber' is possibly 'null'.(18047) because it does not have the knowledge when on's callback will run. It is possible, from the compiler's perspective, maybeNumber is reverted to null again. It makes more sense that TypeScript should have better support for this use case. Also see microsoft/TypeScript#58729

[Phlogistique]

But indeed, without the definition of on it is impossible to know wether or not maybeNumber can be null in the function body. If you want the value of maybeNumber at the point where you called on, then you can capture it in a separate constant:

let maybeNumber: number | null = null

declare function on(f: () => void): void 
if (maybeNumber) {
  const someNumber = maybeNumber;
  on(() => {
    someNumber.toExponential() // no error!
  })
}

And you could do that if you were using TSX; but Vue's template syntax precludes this opportunity.

[pikax]

I agree this is Typescript problem, but I think the benefit of this out-weighs the typescript behaviour breakage.

Since in terms of Vue behaviour:

<div v-if="foo" @click="foo" />

<div v-if="foo" @click="()=>foo()"/>

foo will never be null when called in onClick, this behaviour differs when you use it in a Component, but IMO is a very edge case.

Also @vuejs/language-tools already supports this :) just not when you have a function

<div v-if="typeof msg === 'string'" @click="msg.toLowerCase()" @auxclick="() => msg.toLowerCase()"></div>
// @auxclick errors