[Question] How to let TypeScript know that I've passed `modelValue`?

[wenfangdu]

Child.tsx

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: Number,
      // 👇 required
      required: true,
    },
  },
  setup() {
    return () => <div>Child</div>
  },
})

Parent.tsx

import Child from '@/views/Child'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const number = ref(0)
    //                  👇 I've used `v-model` to pass `modelValue`
    //                  but TypeScript is complaining that I didn't
    return () => <Child v-model={number.value} />
  },
})

[mistresseve666]

Ran into this today. Workarounds for the TypeScript error are to either mark the field as not required, or provide a default value.

[tihonko999]

One more thing. TypeScript doesn't validate v-model type. If, in the above example, number (in parent component) will be boolean or string, TypeScript will not say that it is wrong.

[funny-family]

@wenfangdu see here

[wasonal]

@wenfangdu you can try to replace 'v-model' to 'modelValue'

[zhiyuanzmj]

I created a PR vue-macros/vue-macros#494 to resolved it.

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/jsx-directive"
      // ...more feature
    ]
  }
}