Subscribe on changes!

Typescript error for Set with v-model

avatar
Apr 26th 2022

Version

3.2.33

Reproduction link

github.com

Steps to reproduce

  1. Open project
  2. Run vue-tsc --noEmit

What is expected?

No TypeScript errors

What is actually happening?

There is a TypeScript error

src/App.vue:9:38 - error TS2322: Type 'Set<unknown>' is not assignable to type 'any[] | Booleanish | undefined'.
  Type 'Set<unknown>' is missing the following properties from type 'any[]': length, pop, push, concat, and 23 more.

9     <input type="checkbox" value="1" v-model="model">
                                       ~~~~~~~

  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:628:3
    628   checked?: Booleanish | any[] // for IDE v-model multi-checkbox support
          ~~~~~~~
    The expected type comes from property 'checked' which is declared here on type 'ElementAttrs<InputHTMLAttributes>'

src/App.vue:13:38 - error TS2322: Type 'Set<unknown>' is not assignable to type 'any[] | Booleanish | undefined'.

13     <input type="checkbox" value="2" v-model="model">
                                        ~~~~~~~

  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:628:3
    628   checked?: Booleanish | any[] // for IDE v-model multi-checkbox support
          ~~~~~~~
    The expected type comes from property 'checked' which is declared here on type 'ElementAttrs<InputHTMLAttributes>'


Found 2 errors.

According to documentation we can use Set with input[type=checkbox]. The code works, but vue-tsc alerts errors

Here is the minimum code to reproduce:

<script setup lang="ts">
  import { ref } from 'vue';

  const model = ref(new Set());
</script>

<template>
  <input type="checkbox" value="1" v-model="model">
</template>
avatar
Oct 2nd 2022

Are there any related developments?