Import components inside setup

[qcp]

Clear and concise description of the problem

Quite often there is a need to specify types for a component's ref variable.
To control behavior, such as a toggle, or receive some data.

Simplest example:

MyComponent.vue

<script setup lang="ts">
defineExpose({
  sayHi: () => alert('hi'),
});
</script>

<template>
  <h1>hi</h1>
</template>

App.vue

<script setup lang="ts">
// Now I have to import it manually
// It would be great if auto-import covered this need as well.
import MyComponent from './components/MyComponent.vue';

const myComp = ref<InstanceType<typeof MyComponent>>();
</script>

<template>
  <my-component ref="myComp" />

  <button @click="myComp?.sayHi()">Say Hi</button>
</template>

Current behavior

Project with reproduction here

Suggested solution

#562
Closed by author 🤷‍♂️

#527
Seems valid solution

Alternative

No response

Additional context

Related issue
unplugin/unplugin-auto-import#118
But it was closed without solution

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[lishaobos]

相同的: #527

我有一个其他的想法：

创建一个 componentInstance.d.ts

import type { GlobalComponents } from '@vue/runtime-core'

declare global {
  type ComponentInstance = {
    [Property in keyof GlobalComponents]: InstanceType<GlobalComponents[Property]>
  }
}

[qcp]

Closed.
Simple and nice solution provided #601 (comment)