Subscribe on changes!

TS2322 when using a boolean value for a radio button

avatar
Aug 12th 2021

Version

3.2.1

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuXHQ8aW5wdXQgdHlwZT1cInJhZGlvXCIgaWQ9XCJvbmVcIiA6dmFsdWU9XCJ0cnVlXCIgdi1tb2RlbD1cInBpY2tlZFwiIC8 XG4gIDxsYWJlbCBmb3I9XCJvbmVcIj5PbmU8L2xhYmVsPlxuICA8YnIgLz5cbiAgPGlucHV0IHR5cGU9XCJyYWRpb1wiIGlkPVwidHdvXCIgOnZhbHVlPVwiZmFsc2VcIiB2LW1vZGVsPVwicGlja2VkXCIgLz5cbiAgPGxhYmVsIGZvcj1cInR3b1wiPlR3bzwvbGFiZWw XG4gIDxiciAvPlxuICA8c3Bhbj5QaWNrZWQ6IHt7IHBpY2tlZCB9fTwvc3Bhbj5cbjwvdGVtcGxhdGU XG5cbjxzY3JpcHQgc2V0dXA XG5pbXBvcnQge3JlZn0gZnJvbSAndnVlJztcblxuY29uc3QgcGlja2VkID0gcmVmKGZhbHNlKTtcbjwvc2NyaXB0PiJ9

Steps to reproduce

Hey,

when using a radio button with a boolean value, there is an error reported. See the following image:

image

I tried to change it to a numeric value with 0 and 1, but then v-model gets underlined with the same message I reported earlier #4321.

What is expected?

There shouldn't be a TS error when using a boolean value for a radio button.

What is actually happening?

0 | 1 can't assign to Booleanish: https://github.com/vuejs/vue-next/blob/7ffa225aa334f0fd7da6ba30bee9109de3597643/packages/runtime-dom/types/jsx.d.ts#L458 true can't assign to string | string[] | number: https://github.com/vuejs/vue-next/blob/7ffa225aa334f0fd7da6ba30bee9109de3597643/packages/runtime-dom/types/jsx.d.ts#L483

avatar
Aug 13th 2021

Hey, I would like to report similar type issue, but I have the opposite problem. It works with boolean value for, but fails for string value.

Example taken from doc page, refactored to use typescript and script setup https://v3.vuejs.org/guide/forms.html#radio

image

Vue version: 3.2.2

avatar
Aug 16th 2021

Since this is also related to v-model + JSX typing + Volar, I'll close this one to keep the discussion in #4321.