vue3➕ts项目中

vue3中写的全局的组件使用后,写了.d.ts的类型声明文件,鼠标放到组件上显示any,组件是自动注册的

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
如果您已经编写了 Vue3 全局组件,并编写了相应的 .d.ts 类型声明文件,但在使用时仍然出现类型为 any 的情况,可能是因为类型声明文件没有正确导出组件类型。

您可以在类型声明文件中,通过 export 将组件类型导出,例如:

import { DefineComponent } from 'vue';

// 定义组件 props 类型
interface MyComponentProps {
  // ...
}

// 导出组件类型
export default MyComponent: DefineComponent<MyComponentProps>;

在上面的示例中,DefineComponent 是 Vue 提供的一个类型,用于定义组件类型。您可以将组件的 props 类型作为泛型参数传入 DefineComponent 中,然后将 DefineComponent 的返回值作为类型导出。

然后在使用该组件时,您可以通过 import 导入组件类型,并将其指定为组件的类型,例如:

<template>
  <MyComponent :prop1="value1" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MyComponent from '@/components/MyComponent.vue';
import { MyComponentProps } from '@/types/components';

export default defineComponent({
  components: {
    MyComponent,
  },
  data() {
    return {
      value1: '...',
    };
  },
  // 将 MyComponentProps 指定为 MyComponent 的类型
  props: {
    prop1: MyComponentProps.prop1,
  },
});
</script>

在上面的示例中,通过 import 导入了组件类型 MyComponentProps,然后将其指定为组件 MyComponent 的类型。这样,组件的类型就能被正确识别和检查,不再是 any 类型。

另外,如果您的组件是通过自动注册的方式注册的,您可以在 .d.ts 类型声明文件中,使用 declare module 来声明组件的类型。例如:

import { DefineComponent } from 'vue';

declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

在上面的示例中,使用 declare module 声明了 .vue 文件的模块类型,并将组件的类型指定为 DefineComponent<{}, {}, any>。这样,在使用自动注册组件时,组件的类型也能被正确识别和检查。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢