v-if does not fix object might be null error on @click

[danielmoessner]

I've got the following error:

Is this an error with Volar? Or am I doing something wrong? Or is it not possible to have TypeScript not complain here?

Code:

<template>
  <div v-if="!!myObject">
    <button @click="test(myObject)">Download</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

interface MyInterface {
  name: string;
}

export default defineComponent({
  setup() {
    const myObject = ref<MyInterface | null>(null);

    const test = (item: MyInterface) => {
      console.log(item.name);
    };

    return {
      myObject,
      test,
    };
  },
});
</script>

[pikax]

Solved: #1249

[danielmoessner]

Thanks for your answer. Has it been released yet?

[johnsoncodehk]

@danielmoessner yes, you should setup { "vueCompilerOptions": { "experimentalAllowTypeNarrowingInInlineHandlers": true } } in tsconfig.

[danielmoessner]

Interesting, thanks. I'll check it out.

[danielmoessner]

Since version 1.0.x it is not working anymore. It used to work below 1.x
Do you know more? @johnsoncodehk @pikax

[johnsoncodehk]

This option renamed to narrowingTypesInInlineHandlers, see https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md#100-rc0-2022105.