Vue 3中导入组件的类型定义问题

问题场景 #

导入Vue3同步组件后，无法为其指定正确的TypeScript类型：

• 误用ReturnType<typeof defineAsyncComponent>（这是异步组件的类型）
• Vue2的AsyncComponentPromise类型在Vue3中已废弃

组件代码示例 #

// Component1.ts
export default defineComponent({
  name: 'Component1',
  // 其他组件配置...
})

// Component2.ts
export default defineComponent({
  name: 'Component2',
  // 其他组件配置...
})

当前代码（存在类型问题） #

// MyComponents.ts
import Component1 from './Component1';
import Component2 from './Component2';

type componentArrayType = {
  name: String; // 错误：应使用小写string而非构造函数类型String
  component?: ReturnType<typeof defineAsyncComponent>; // 错误：同步组件不匹配异步组件类型
}

export const components = [
  {
    name: 'Comp1', // 原代码中Comp1未定义，修正为字符串
    component: Component1
  },
  {
    name: 'Comp2', // 原代码中Comp2未定义，修正为字符串
    component: Component2
  }
];

正确解决方案 #

方案1：使用Vue官方提供的Component类型 #

直接从vue导入通用组件类型，适用于所有Vue组件：

import { Component } from 'vue';
import Component1 from './Component1';
import Component2 from './Component2';

type ComponentArrayItem = {
  name: string;
  component: Component;
};

export const components: ComponentArrayItem[] = [
  {
    name: 'Comp1',
    component: Component1
  },
  {
    name: 'Comp2',
    component: Component2
  }
];

方案2：利用typeof推导精准组件类型 #

如果需要更贴合组件实际类型的注解，直接通过typeof推导：

import Component1 from './Component1';
import Component2 from './Component2';

// 推导单个组件的具体类型
type SingleComponentType = typeof Component1 | typeof Component2;

type ComponentArrayItem = {
  name: string;
  component: SingleComponentType;
};

export const components: ComponentArrayItem[] = [
  {
    name: 'Comp1',
    component: Component1
  },
  {
    name: 'Comp2',
    component: Component2
  }
];

关键注意点 #

• 类型注解中使用小写string而非大写String：String是JavaScript构造函数类型，TypeScript中应使用string表示字符串值类型。
• 区分同步/异步组件类型：ReturnType<typeof defineAsyncComponent>仅适用于异步组件，同步组件无需此类型。
• 若组件包含自定义属性，方案2的typeof推导会保留这些属性的类型，比通用Component类型更精准。

内容的提问来源于stack exchange，提问作者emreseyit