vue-tsc bug with checkboxes and numbers

[Keztur]

The following checkbox in my Vue 3 project

<input
v-model="closed"
true-value="-1"
false-value="0"
type="checkbox"
@change="UpdateFilter()"
/>

creates the typescript error:
“Type ‘number’ is not assignable to type ‘any[] | Booleanish | undefined’.ts(2322)”

The variable “closed” is a number indeed. And I told vue to handle -1 as true and 0 as false, but vue-tsc doesn’t seem to recognize this.

My dev dependencies look like this:

//package.json
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }

[johnsoncodehk]

This is correct error, you should change closed value from 0 / 1 to true / false.

[Keztur]

But aren't this "attributes" (true-value, false-value) a vue feature designed to allow different input types (like strings "true"/"false") as stated here:
https://vuejs.org/guide/essentials/forms.html#checkbox-1

[johnsoncodehk]

Yes string "true" / "false" is valid (volar should not have error with it), but 0 / 1 or number is not valid, this type is define in https://github.com/vuejs/core/blob/9c304bfe7942a20264235865b4bb5f6e53fdee0d/packages/runtime-dom/types/jsx.d.ts#L45.

[Keztur]

I understand. Thanks for the clarification.
I would boldly argue though that 0 is at least as "booleanish" as the string "false".
Many databases like MySQL store boolean values as numbers only. I have to convert everything first to booleans and later back to numbers, when writing the data back.
But this is up to the vue developers I guess. Thanks for your time.

[KaelWD]

@johnsoncodehk vue doesn't set checked directly to the v-model value, it sets it as a boolean based on a comparison to true-value/false-value:
https://github.com/vuejs/core/blob/bdffc143ef3aa27c347b22f19d0052194b54836e/packages/runtime-dom/src/directives/vModel.ts#L156
https://github.com/vuejs/core/blob/bdffc143ef3aa27c347b22f19d0052194b54836e/packages/runtime-dom/src/directives/vModel.ts#L247-L253

[johnsoncodehk]

@KaelWD You are pointing out vue runtime behavior, but this is vue types behavior problem, it should still handle in vue but not volar (just what I said at #1252 (comment)).

[KaelWD]

You can't just change checked to any. v-model="-1" is valid because vue will convert it to true/false based on true-value/false-value, but checked="-1" is not. vue-tsc should not be treating v-model as an alias for checked, and vue should change checked to Booleanish only.

[Keztur]

I actually asked for a feature change in vue - or actually I started a "discussion".
But all I got was a suggestion for a workaround.
vuejs/core#6195

Since I have many checkboxes in my application I decided to go for a simpler way.
<input type="checkbox" v-model="(MyValue as any)" false-value="0" true-value="-1">

[johnsoncodehk]

Thanks for the explanation, I don't fully understand it yet, will look at it later.

[johnsoncodehk]

After v1.0.7 you can use experimentalModelPropName: #1821 (comment)