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>
                );
            }
        });
    }
}

[owocc]

可以试下这个函数签名,我感觉还蛮好用的

import {
    type SlotsType,
    type VNode,
    defineComponent
} from 'vue'


interface CompPops {
    arg1: string
}

interface Row {
    name: string
    id: number
}
type PropsWithChildren = SlotsType<{
    default: (data: { row: Row }) => VNode
}>

export const Compo = defineComponent<CompPops, [], '', PropsWithChildren>((props, { slots }) => {
    return () => (
        <div>
            {slots?.default?.({
                row: {
                    name: 'name',
                    id: 1
                }
            })}
        </div>
    )
}, {
    name: 'Comp',
    props: ['arg1']
})

<script setup lang="ts">
import { Comp } from './demo'
</script>
<template>
    <Comp arg1="1" >
    <template #default="{row}">
    {{row.id }}
    </template>
    </Comp>

</template>