Vue动态组件使用导入组件时的正确类型定义问题

问题场景 #

我在Vue3中尝试通过props传递组件，使用<Component :is="">渲染动态组件，但遇到了类型定义不匹配的问题——组件能正常渲染，但IDE会报类型错误。

现有类型定义 #

import type { Component } from "vue";

export interface GridColumn {
    // 无关内容略
    component?: Component,
}

组件脚本代码（无类型报错） #

import Severity from "@/modules/playground/grid-columns/Severity.vue";
import type { DataRow, GridColumn } from "@/components/grid/grid-column.type";

const columns: GridColumn[] = [
    {
        component: Severity,
    }
];

模板代码及报错 #

模板代码：

<template>
    <Component 
        v-if="col.component" 
        :is="col.component"
    ></Component>
</template>

PHPStorm 2023.1中高亮is属性行的报错（已翻译为中文）：

类型 (ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any> & ThisType<CreateComponentPublicInstance<{}, any, any, ComputedOptions, MethodOptions, any, any, any, Readonly>>) | FunctionalComponent<any, any> | ComponentPublicInstanceConstructor 无法赋值给类型 string | ComponentDefinition

解决方案 #

问题根源在于Vue的Component类型是宽泛的联合类型，而模板中:is属性的IDE类型检查更倾向于接收组件构造函数或组件名称字符串，导致类型不匹配提示。以下两种方式可解决：

方案1：修改接口类型定义 #

直接使用更贴合动态组件要求的ComponentPublicInstanceConstructor类型替代Component：

import type { ComponentPublicInstanceConstructor } from "vue";

export interface GridColumn {
    // 无关内容略
    component?: ComponentPublicInstanceConstructor,
}

方案2：类型断言消除报错 #

若不想修改原有接口，可在模板或脚本中对component进行类型断言：

• 模板中直接断言：

<template>
    <Component 
        v-if="col.component" 
        :is="col.component as ComponentPublicInstanceConstructor"
    ></Component>
</template>

• 脚本中提前处理类型：

import type { ComponentPublicInstanceConstructor } from "vue";

// 转换类型后使用
const safeColumns = columns.map(col => ({
    ...col,
    component: col.component as ComponentPublicInstanceConstructor | undefined
}));

内容的提问来源于stack exchange，提问作者aron.duby