Support TS annotation on v-model

[qgates]

New issue repro of issue #4640. It was closed with fix that appears to address a different issue. Apologies for reposting.

What problem does this feature solve?

An object with attributes of union type throws ts2322 in Volar when supplied to v-model for textarea, input (and others), when the attribute is specified in v-model. Type annotation would solve, and does do so with v-bind, but doesn't work with v-model. Ergo the only current workaround is to use a v-bind/@change combo where TS annotations can be used.

Example usecase:

interface MyType {
  data: string|Date,
}

Template:

<textarea v-model="arr[index].data as string" ...

where arr is a MyType[]

More info: vuejs/language-tools#512

[yyx990803]

On the Volar side it seems its bundled compiler hasn't updated to incorporate d23fde3 yet. /cc @johnsoncodehk

[qgates]

It's not just a volar issue. I see a compilation error from vite and on the browser as well.

[yyx990803]

I know. Turns out the TS transpiler used in SFC playground (sucrase) is able to parse invalid TS syntax generated by the compiler... but esbuild will throw an error in this case.

[qgates]

Essentially:

v-bind="var as string" works, as expected ie. clearing any ts2322 error where valid. But v-model="var as string" does not and complains about invalid expression syntax.

Thanks for looking into this 👍