Vue template: Object is possibly 'undefined' errors

[marcianos]

I try to use Vite + Vue + Typescript with Volar plugin.

Vue version: 3.2.25
Typescript version: 4.5.5
Vite version: 2.8.0
Vue-tsc: 0.33.9

Example link

I generate: const testing: Ref<string | undefined> = ref();.

At beginning this value is undefined and in onBeforeMount() I set this value to a string. In vue template the div should only be generated when testing has a value (v-if="testing"). For the input field the v-model has type string and not string or undefined (which should be right).

The button click event errors with the message:

Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.

In the example you can see this error message when you run vue-tsc --noEmit.

Is this behavior intended? And how can I solve this issue when I have a ref which is first undefined and then I receive the concrete value from an api call?

[johnsoncodehk]

This is design behavior, you could use @click="testClick(testing!)", there are some discussion: #146