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

[so1ve]

@Bernard-Borg #3271, please be patient :)

[f3oall]

Hey guys, it's really blocking the use of generic components, any chance that it will be fixed soon?

Thanks for the great tools btw :)

[so1ve]

Hey folks 👋 Could you please checkout #3536? Does it work for you?

Note

You should use ComponentExposed from the vue-component-type-helpers packages instead of TypeScript's built-in ReturnType or InstanceType utilities.

[joris-gallot]

Hey! how I'm supposed to do, when I want for example $el from a generic component?

[cernymatej]

For some reason, I am getting {} type from the ComponentExposed utility. Have any of you encountered something similar?

[szulcus]

I have the same problem. Why this issue is closed?

[so1ve]

#3206 (comment)

[arthaali]

ComponentExposed

Hello, I am still facing this issue and the fix is not really clear.
the link you provided does not exist and I can't find how to use ComponentExposed
can you please report the fix?
Can you maybe support here? @so1ve
Thank you

[so1ve]

Install vue-component-type-helpers, import { ComponentExposed } from 'vue-component-type-helpers', then replace InstanceType with ComponenttExposed.

[postpostscript]

Edit: I removed my original comment since I see that the PR so1ve linked fixes the issue, and I got it to work! I think what happened is that after manually updating the package I didn't properly reload the Volar project. For anyone else who is still getting this issue, I would check that node_modules/vue-component-type-helpers is in fact on 1.8.27, since mine wasn't after I updated Vue to 3.4 (maybe because of my package-lock? not sure). Thanks for the fix!

[szulcus]

@so1ve I have wrong Vuelidate (https://vuelidate-next.netlify.app/#getting-started-1) type. It should be available without .value 🤔


Computed variable changedData works fine (without .value suffix). For now I have vuelidate: computed(() => vuelidate.value) as workaround in defineExpose().

[LeoKun1231]

Looking forward to your update

[mauroviniciussilva]

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)

I've just tried this solution and for some reason Typescript were complaning about K being duplicated, so I had to use this way:

import { type DefineComponent } from 'vue'

export type GenericComponentInstance<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 Y) => void }
        ? Y[0] & InstanceType<DefineComponent>
        : any
      : any
    : any;

[TheDutchCoder]

ComponentExposed still doesn't work properly. I have opened an issue on the Vue repo for this, unless it's purely a language tool issue, then maybe it should be re-opened here? vuejs/core#11459

Reproduction: https://play.vuejs.org/#eNqFU01v2zAM/SuEMCApkNjY2pPnBNiGHDagW9HlVhVDYNOOOlkSJNlL4Pm/j5LztWJrDwZIPvLxkZR79sGYpGuRZSx3hRXGg0PfGpAbVS84846zJVeiMdp66MFiNYN7rGCAyuoGJlQ7OeG3+0+6MQckSUc30J9T/N4g8QRAK1R+tTPaYXnJNy+O4Dxkz7coDVo3eX+hQ6tb3Sr/d2HI4KrQynlo9qQyC1Lz573ywKqrg9ol/AbVSrmERZhuGuyrwHNqMZ1ewWIJPVcAgVxLTKSup7FF0m1ki8kbDEUDfXk67pG2Ro7HxsiNR/IA8sN+qA2tNpZzBlmlNbkPPYgyg7cwzGi+YL6D4ZHwlGrz9IKIzegsJKQSdfLktKLbRW2chcUJifab8YKEcpaNqgO2kVL/+hJj3rY4O8aLLRY//xF/crsQ4+zOokPbIWcnzG9sjX6EV9+/4o7sE9jospWU/QJ4j7TENmgc0z62qiTZF3lR7ed4baHqtVvtPCp3HCoIDZlDzOeMbh8W+7/Rz3Kvk5tYR6eiLZ7f50vPH2pUaEVB7jr+DCVWQuGd1cblsQcdMIP1wyOxLqevPIFSdNEg00A3r7QNbbY0JAgVmKhF38MYGYY8NWNdOhY+fwg/OvozaGAagGZLrm/Y8AeQ1kpf

[so1ve]

ComponentExposed is not suitable for you usecase. It is used to get things exposed by defineExposed.

[TheDutchCoder]

ComponentExposed is not suitable for you usecase. It is used to get things exposed by defineExposed.

Am I not running into the same issue though? IntstanceType not working with components that have a generic?
It'd also what you recommended here: #3206 (comment)

[ethanchristensen01]

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

For anybody checking this issue in the future, it's worth noting that this URL is incorrect. The correct URL is https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers