TS Error on props when using Generic SFC

[KieranSunshine]

I created a fresh repo using npm init vue@latest the repo can be found here, vue-generic-test.

The problematic file is src/components/GenericComponent.vue

When I try to access a prop I'm my IDE shows the following error:

If I remove the usage of the generic from props, the error goes away.

Apologies if this is already a known issue, or if I'm just being dumb. Let me know if I can provide any more information.

To be clear I'm using VS code, volar 1.8.5, typescript 5.0.4, vue 3.3.4, vue-tsc 1.8.5.

[KieranSunshine]

Seems like this might be a duplicate of #3204?

[lmiller1990]

I'm having the same issue. I just tried generics for the first time.

SFC playground: https://play.vuejs.org/#eNq9Uk1Lw0AQ/SvDnhRKKvQWY0GlBz1o0d66PYRkGrdudpfdSS2E/Hdnt7T2IBU89DTMe2+YNx+9uHcu23YoclGEyitHoEvT3ElBQQoISJ2DBg16VTG4ANwRmjpAD6RIYw6BvDINDFJMpalxrQzOvXWh6KUBUIRtDotbaYbp1TWHYrxvw2JOmHW6JOQMoOh0igB9nwqz1AKGIbHjRBfjY40YscnKmrVqsk2whmdIPaWobOuURv/qSFnDg+SQmMiVWtuv54SR73B0wKsPrD5/wTdhFzEp5h4D+i1KceSo9A3Snp69v/BuTsjW1p1m9RnyDYPVXfS4lz10pmbbJ7rk9ql11hNveRFmcf3hMFQ0GpVD0kvBh3w8M/qP3Uk2SXV8Ft5irLnAEyxX/3uD5c3qr08YvgFrl+5j

Oddly enough, working:

<script lang="ts" setup generic="T extends ListItem">
export interface ListItem {
  id: string;
  title: string;
}

const props = defineProps<{
  items: T[];
}>();
</script>

<template>
  <div>{{ items[0].title }}</div>
</template>

But... not working. All I did was change T[] to T.

<script lang="ts" setup generic="T extends ListItem">
export interface ListItem {
  id: string;
  title: string;
}

const props = defineProps<{
  item: T;
}>();
</script>

<template>
  <ul>
    {{ item.title }}</li> 
  </ul>
</template>

[marcianos]

I also use vue in version 3.3.4 and 1.8.10 version of volar. I try to create a generic component but I receive an error message:
Property 'name' 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; }'

<template>
  <p>{{ animal.name }}</p>
</template>

<script setup lang="ts" generic="T extends Animal">
export interface Animal {
  name: string;
}
const props = defineProps<{
  animal: T;
}>();
</script>

Array works as mentioned in the comment above. But I need it also for a single generic object.