Unexpected errors regarding to "v-if" in vue-tsc

[tsekka]

Here's an example:

<script setup lang='ts'>
class ExampleClass {
  doSomething() {
    // ..
  }
}

const shouldBeNull = Math.round(Math.random()) === 0
const exampleObject: null | ExampleClass = shouldBeNull ? null : new ExampleClass

// As expected, this is fine and will not give any error
if (exampleObject !== null) {
  exampleObject.doSomething()
}

</script>

<template>
  <!-- 
    Everything OK on vscode, but on console I see:
      "src/ExampleComponent.vue:22:49 - error TS2531: Object is possibly 'null'." 
    -->
  <button v-if="exampleObject !== null" @click="exampleObject.doSomething()">Do it</button>
</template>

What can cause this?

[johnsoncodehk]

Duplicate of #1134

[tsekka]

So, it's intentional that it shows error in console but not in editor?

[johnsoncodehk]

@tsekka It should show on vue-tsc and vscode both. Are you using same vue-tsc and volar extension version?

[tsekka]

@johnsoncodehk Both vue-tsc npm package and volar VSCode extension are 0.34.9.

[tsekka]

@johnsoncodehk Both vue-tsc npm package and volar VSCode extension are 0.34.9.

Actually I've just updated vue-tsc to 0.34.9. It was 0.33 before. And it's not showing error on console anymore.

[johnsoncodehk]

It should report an error, will fix in next version. You should change you code to @click="exampleObject!.doSomething()".

[tsekka]

@johnsoncodehk Thanks.