TSX Slot Type Missing / TSX 中使用插槽无类型推断

[Kenhuey]

import { defineComponent, SlotsType, VNode } from "vue";

export default defineComponent({
    slots: Object as SlotsType<{
        head: () => VNode;
        content: () => VNode;
    }>,
    setup: (_, { slots }) => {
        return () => (
            <div>
                {/* slot. 无类型推断 */}
                {/* slot. Missing Type */}
                {slots.head && slots.head()}
                <div></div>
            </div>
        );
    }
});

And i tried / 然后我尝试了

export default defineComponent<
    {},
    {},
    SlotsType<{
        head: () => VNode;
        content: () => VNode;
    }>
>({
    setup: (_, { slots }) => {
        return () => (
            <div>
                {/* slot. 无类型推断 */}
                {/* slot. Missing Type */}
                {slots.head && slots.head()}
                <div></div>
            </div>
        );
    }
});

Also Reference Type Missing / 引用组件的时候也没有类型提示

<component>
    {{
        // 无自动类型推断
        // No Type Inference
        head: () => <div>Head</div>
    }}
</component>

How do I fix it then type not missing? / 我应该怎么编写才能获得类型推断？

[Kenhuey]

Found a weird way to have type Inference in Props define, works well, but I don't know if it will cause performance affecting / 发现一个可以用的邪道写法，写到 props 也有类型推断了，但是不知道会不会影响性能

import style from "./index.module.scss";

import { defineComponent, VNode } from "vue";
import { JSX } from "vue/jsx-runtime";

import { Render } from "@/application/core/render";

@Render.Component()
export class Popover extends Render.ComponentInstance {
    public get() {
        return defineComponent({
            props: {
                trigger: {
                    type: String as () => "hover" | "click",
                    required: true
                },
                slot: {
                    type: Object as () => {
                        triggerWrapper: () => VNode | JSX.Element;
                        default?: () => VNode | JSX.Element;
                    },
                    required: true
                }
            },
            setup: (props) => {
                return () => (
                    <div class={style["popover-container"]}>
                        {props.slot.triggerWrapper()}
                        <div></div>
                    </div>
                );
            }
        });
    }
}