TS2322 when using multiple checkboxes, bound to the same array

[antony-k1208]

Version

3.2.1

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuXHQ8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgaWQ9XCJqYWNrXCIgdmFsdWU9XCJKYWNrXCIgdi1tb2RlbD1cImNoZWNrZWROYW1lc1wiIC8+XG4gIDxsYWJlbCBmb3I9XCJqYWNrXCI+SmFjazwvbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBpZD1cImpvaG5cIiB2YWx1ZT1cIkpvaG5cIiB2LW1vZGVsPVwiY2hlY2tlZE5hbWVzXCIgLz5cbiAgPGxhYmVsIGZvcj1cImpvaG5cIj5Kb2huPC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIGlkPVwibWlrZVwiIHZhbHVlPVwiTWlrZVwiIHYtbW9kZWw9XCJjaGVja2VkTmFtZXNcIiAvPlxuICA8bGFiZWwgZm9yPVwibWlrZVwiPk1pa2U8L2xhYmVsPlxuICA8YnIgLz5cbiAgPHNwYW4+Q2hlY2tlZCBuYW1lczoge3sgY2hlY2tlZE5hbWVzIH19PC9zcGFuPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7cmVmfSBmcm9tICd2dWUnO1xuXG5jb25zdCBjaGVja2VkTmFtZXMgPSByZWYoW10pO1xuPC9zY3JpcHQ+In0=

Steps to reproduce

Hey,

when using multiple checkboxes, which are bound to the same array TS2322 arises. See the following image:

What is expected?

There shouldn't be a TS error when using an array as v-model.

checkbox's v-model prop is checked(https://v3.vuejs.org/guide/forms.html#basic-usage), and checked type is Booleanish = boolean | 'true' | 'false'(https://github.com/vuejs/vue-next/blob/7ffa225aa334f0fd7da6ba30bee9109de3597643/packages/runtime-dom/types/jsx.d.ts#L458), so number[] can't assign to checked in expected.

What is actually happening?

TS2322 error, since checked needs to be Booleanish.

[LinusBorg]

It would be great it you could provide an acutal TS example we can run.

[antony-k1208]

Sorry, I hope this helps: https://codesandbox.io/s/admiring-sky-ucmn0?file=/src/components/HelloWorld.vue

It seems to be only showing this in VS Code with Volar, at least from what I can tell.

[posva]

@johnsoncodehk can you confirm the problem is within vue?

[johnsoncodehk]

I personal think this is InputHTMLAttributes types problem, hope this comment helpful: johnsoncodehk/vue-tsc#57 (comment)

[yyx990803]

@johnsoncodehk 77223df should fix the following cases:

• checkbox with Array v-model value
• <input> with non-primitive value bindings

However the case for radio needs to be fixed in Volar. Volar is mapping the v-model on a radio input to checked, which is incorrect:

<input type="radio" v-model="selected" :value="foo">
<input type="radio" v-model="selected" :value="bar">

Here v-model's binding type should be the same as :value. Not sure if this can be inferred, but at least it should be any instead of Booleanish.