Cannot use `InstanceType<typeof Comp<any>>>` on generic components

[pikax]

Since the push of adding generic components on Vue 3.3.0, we don't seem able to get the InstanceType aka public instance anymore.

<script setup lang="ts" generic="T">
const props = withDefaults(defineProps<{
	value?: T | null;
	list: T[];
}>(), {
	value: null,
});
</script>

<template>
    <select>
       // code
    </select>
</template>

<script lang="ts">
import MyComp from './MyComp.vue'

// This has error
const el = ref<null | InstanceType<typeof MyComp<any>>>( null )

</script>
<template>
   <my-comp ref="el" list="[]"/>
</template>

[zf1998]

I aslo!!! use vue@3.3.4，vue-tsc@1.6.5.

[johnsoncodehk]

When using generic, Volar defines the component as a functional component, so you should use ReturnType instead of InstanceType:

Another option is to use ComponentExposed from vue-component-type-helpers:

import MyComp from './MyComp.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'

const el = ref<null | ComponentExposed<typeof MyComp<any>>>( null )

[varlamov88]

Vue 3.3.4
Volar 1.7.8
Without generic and with InstanceType

With generic and ReturnType/ComponentExposed

[oddcelot]

@varlamov88 Depends on how badly you need it, but I deconstructed the type into a new one based on DefineComponent just to get it to work at the moment over here vuejs/core#8373 (comment)

[johnsoncodehk]

I can confirm that ComponentExposed is not working, and ReturnType not working is correct behavior.

[satrong]

This is my temporary solution, but it's not perfect😂. I'm looking forward to the official release of the final solution.

import { type DefineComponent } from 'vue'
import MyComp from './MyComp.vue'

type ComponentInstance<T> = T extends new (...args: any[]) => infer R
  ? R
  : T extends (...args: any[]) => infer R
    ? R extends { __ctx?: infer K }
      ? Exclude<K, void> extends { expose: (...args: infer K) => void }
        ? K[0] & InstanceType<DefineComponent>
        : any
      : any
    : any

const el = ref<null | ComponentInstance<typeof MyComp<any>>>(null)

[Bernard-Borg]

bump - need this please