Búsqueda de sitios web

typescript - Tipo adecuado para un componente importado de Vue para usar con el componente dinámico


Estoy tratando de pasar un componente a través de props para que se renderice usando el componente <Component :is="">, pero no puedo parecer encontrar los tipos correctos para usar.

La definición del tipo es la siguiente

import type { Component } from "vue";

export interface GridColumn {
    // not relevant stuff here
    component?: Component,
}

Luego, dentro de mi componente tengo lo siguiente, que en este punto no tiene quejas.

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

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

Pero cuando entro en el uso real, la representación da un error de tipo, pero aún así se muestra como se espera.

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

La línea de la propiedad is arriba está resaltada en mi editor (PHPStorm 2023.1) como un error:

Tipo (ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any> & ThisType<CreateComponentPublicInstance<{}, any, any, ComputedOptions, MethodOptions, any, any, any, Readonly>>) | FunctionalComponent<any, any> | ComponentPublicInstanceConstructor no se puede asignar al tipo string | ComponentDefinition

Respuesta #1

Este es un problema del IDE, por favor siga WEB-60065 y los tickets vinculados para actualizaciones

Artículos relacionados