Vue3中组件数组的正确TypeScript类型定义咨询

在Vue 3中，直接使用Component[]作为ref的泛型可能因类型导入或匹配问题失效，你可以通过以下几种方式修正：

• 导入正确的组件类型
  先从vue包中导入对应的类型，再定义数组：

  import { ref, Component } from 'vue';
  import Component1 from './Component1.vue';
  import Component2 from './Component2.vue';
  import Component3 from './Component3.vue';
  
  const steps = ref<Component[]>([
    Component1,
    Component2,
    Component3,
  ]);
  

• 使用DefineComponent类型适配自定义组件
  如果你是用defineComponent语法定义的组件，直接用DefineComponent类型会更精准：

  import { ref, DefineComponent } from 'vue';
  import Component1 from './Component1.vue';
  import Component2 from './Component2.vue';
  import Component3 from './Component3.vue';
  
  const steps = ref<DefineComponent[]>([
    Component1,
    Component2,
    Component3,
  ]);
  

• 兜底兼容方案
  如果遇到特殊组件（如第三方组件）类型不匹配的情况，可以用更宽泛的类型覆盖：

  import { ref, defineComponent } from 'vue';
  import Component1 from './Component1.vue';
  import Component2 from './Component2.vue';
  import Component3 from './Component3.vue';
  
  const steps = ref<(typeof defineComponent)[]>([
    Component1,
    Component2,
    Component3,
  ]);
  

注意：若组件是异步组件，需替换为AsyncComponent类型（同样从vue导入）。

内容的提问来源于stack exchange，提问作者زوہیب خان