Typescript errors related to using generics

[Ragura]

I have made a reproduction combining a few typescript errors displayed in the editor when using combinations of generics, defineModel and props destructuring: https://github.com/Ragura/vue-issue-repro

These errors relate to reports made in #3225 and #3195.

The reproduction includes 3 components:

• DropdownDefineModel: using generics, props destructuring and defineModel
• DropdownDestructuring: using generics and props destructuring
• DropdownTraditional: using only generics

All three cases report different errors inside the components as well as App.vue you can inspect, but all three can be fixed by removing the generic from script setup and working with type any instead.

EDIT:
For these errors to show up when running the typecheck in the terminal, use vue-tsc --noEmit --p tsconfig.app.json.
IMPORTANT: One error only shows up in the editor and not when running vue-tsc and that is the error Default export of the module has or is using private name 'Props'. in the DropdownDestructure.vue file.

The reported errors when running vue-tsc are these:

src/App.vue:28:7 - error TS2345: Argument of type '{ modelValue: { id: number; name: string; }; title: string; options: { id: number; name: string; }[]; }' is not assignable to parameter of type '{ modelValue?: { id: number; name: string; } | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.
  Object literal may only specify known properties, and 'title' does not exist in type '{ modelValue?: { id: number; name: string; } | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.

28       title="DefineModel"
         ~~~~~~~~~~~~~~~~~~~

src/components/DropdownDestructure.vue:32:29 - error TS2339: Property 'id' does not exist on type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }'.

32       :selected="modelValue.id === option.id">
                               ~~

src/components/DropdownTraditional.vue:28:29 - error TS2339: Property 'id' does not exist on type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }'.

28       :selected="modelValue.id === option.id">

I am using the following:
vue-tsc: 1.7.8
vue: 3.3.4
Vue Language Features extension version 1.7.8, running takeover mode pointed to local vue-tsc typescript version 5.0.4.
Using VSCode insiders.

[Ragura]

I mistakenly ran vue-tsc --noEmit without specifying the correct tsconfig.app.json file with the --p flag. When doing this, it does report the errors in the terminal as well. I have edited the original post to match these findings.

[yassilah]

Hi, I can confirm I have the same issue, whether using generic components or not, combining defineModel and defineProps doesn't work as the latter overrides the former.

<script setup lang="ts">
defineProps<{
  type?: string
}>()

const modelValue = defineModel<number>()
</script>

Tried with v1.7.8, v1.6.4 and v1.2.0

[johnsoncodehk]

Duplicate of #3164