Vue 导入组件的正确类型以与动态组件一起使用

Question

我正在尝试通过 props 传递组件以使用

<Component :is="">

组件进行渲染，但似乎无法找出要使用的正确类型。

类型定义如下

import type { Component } from "vue";

export interface GridColumn {
    // not relevant stuff here
    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>

上面的

is

属性行在我的编辑器（PHPStorm 2023.1）中突出显示为错误：

类型（ComponentOptionsBase & ThisType>）|功能组件 | ComponentPublicInstanceConstructor 不可分配给类型字符串 |组件定义

Answer 1

尝试使用类型

ComponentPublicInstance

：

import type { ComponentPublicInstance} from "vue";

export interface GridColumn {
    //...
    component?: ComponentPublicInstance,
}

Answer 2

这是 IDE 问题，请关注 WEB-60065 和链接的工单更新