能否支持slot的类型？

[Groupguanfang]

问题的清晰而简明的描述

能否支持slots的类型提示？

目前最新版本的volar是能支持slots的类型提示的，甚至能显示出jsdoc：

naive ui能否跟进一下？这样会有更好的编码体验的！🙏

建议的解决方案

好像只有新版的defineComponent函数签名才能支持？目前好像大部分的naive ui组件都是用options实现的，切换成新版的defineComponent函数签名工作量会不会太大了?

备选方案

No response

附加上下文

No response

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在请求相同功能的问题，以避免创建重复的问题。

[Zheng-Changfu]

工作量有点大哦

[Groupguanfang]

今天晚上研究了一下，如果重构options API为这种新版setup API实在是不太现实，但是其实可以用纯类型推断的角度解决这个问题，虽然不是很优雅，而且有点蹩脚哈！

比如NTooltip组件，原来的实现是这样的：

export type TooltipInst = PopoverInst

export const tooltipProps = {
  ...popoverBaseProps,
  ...(useTheme.props as ThemeProps<TooltipTheme>)
}

export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>

export default defineComponent({
  name: 'Tooltip',
  props: tooltipProps,
  __popover__: true,
  setup(props) {
  // 一大坨东西
  // ...
  // ...

那么稍微改动一下，不要让这个原来的defineComponent作为默认导出：

const tooltip = defineComponent({
  /** 里面一大坨 */
})

export default tooltip as any as /** 这里开始类型体操🤸 */

然后就很简单了：

// 导出一个TooltipSlots类型供外界使用，并且写上jsdoc注释等...
export interface TooltipSlots {
  /**
   * ## 默认插槽，承载Tooltip的内容
   */
  default?: any
  /**
   * ## 触发插槽，用来定义触发元素
   */
  trigger?: any
}

// 定义新版签名的类型
type OverloadTooltip = (props: TooltipProps, ctx: {
  slots: TooltipSlots
}) => JSX.Element

// 然后导出它
export default tooltip as unknown as OverloadTooltip

这样外界就能拿到slots的类型提示了，唯一不好的地方就是要用那刺眼的as unknown as xxx强制转换，就有点麻，但是这样确实能完美的解决问题。

现在需要的是作者同意用这个办法来实现。如果 @07akioni 同意的话，工作量虽然大，但是我平时没什么事做，我来提这个PR也是没问题的；毕竟本身不涉及任何运行时的东西，全是类型体操🤸

[Zheng-Changfu]

defineComponent支持插槽类型推断，有个SlotType类型，我的意思是每个组件都需要增加的话工作量摆在那里

…

---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 发送日期 | 2024年12月07日 19:49 | | 收件人 | tusen-ai/naive-ui ***@***.***> | | 抄送人 | Zheng-Changfu ***@***.***>, Comment ***@***.***> | | 主题 | Re: [tusen-ai/naive-ui] 能否支持slot的类型？ (Issue #6599) | 今天晚上研究了一下，如果重构options API为这种新版setup API实在是不太现实，但是其实可以用纯类型推断的角度解决这个问题，虽然不是很优雅，而且有点蹩脚哈！ 比如NTooltip组件，原来的实现是这样的： exporttypeTooltipInst=PopoverInstexportconsttooltipProps={ ...popoverBaseProps, ...(useTheme.propsasThemeProps<TooltipTheme>)}exporttypeTooltipProps=ExtractPublicPropTypes<typeoftooltipProps>exportdefaultdefineComponent({name: 'Tooltip',props: tooltipProps,__popover__: true,setup(props){// 一大坨东西// ...// ... 那么稍微改动一下，不要让这个原来的defineComponent作为默认导出： consttooltip=defineComponent({/** 里面一大坨 */})exportdefaulttooltipasanyas/** 这里开始类型体操🤸 */ 然后就很简单了： // 导出一个TooltipSlots类型供外界使用，并且写上jsdoc注释等...exportinterfaceTooltipSlots{/** * ## 默认插槽，承载Tooltip的内容 */default?: any/** * ## 触发插槽，用来定义触发元素 */trigger?: any}// 定义新版签名的类型typeOverloadTooltip=(props: TooltipProps,ctx: {slots: TooltipSlots})=>JSX.Element// 然后导出它exportdefaulttooltipasunknownasOverloadTooltip image.png (view on web) 这样外界就能拿到slots的类型提示了，唯一不好的地方就是要用那刺眼的as unknown as xxx强制转换，就有点麻，但是这样确实能完美的解决问题。 现在需要的是作者同意用这个办法来实现。如果 @07akioni 同意的话，工作量虽然大，但是我平时没什么事做，我来提这个PR也是没问题的；毕竟本身不涉及任何运行时的东西，全是类型体操🤸 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[Zheng-Changfu]

defineComponent({ slots:Object as SlotsType<插槽类型> })

…

---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 发送日期 | 2024年12月07日 19:49 | | 收件人 | tusen-ai/naive-ui ***@***.***> | | 抄送人 | Zheng-Changfu ***@***.***>, Comment ***@***.***> | | 主题 | Re: [tusen-ai/naive-ui] 能否支持slot的类型？ (Issue #6599) | 今天晚上研究了一下，如果重构options API为这种新版setup API实在是不太现实，但是其实可以用纯类型推断的角度解决这个问题，虽然不是很优雅，而且有点蹩脚哈！ 比如NTooltip组件，原来的实现是这样的： exporttypeTooltipInst=PopoverInstexportconsttooltipProps={ ...popoverBaseProps, ...(useTheme.propsasThemeProps<TooltipTheme>)}exporttypeTooltipProps=ExtractPublicPropTypes<typeoftooltipProps>exportdefaultdefineComponent({name: 'Tooltip',props: tooltipProps,__popover__: true,setup(props){// 一大坨东西// ...// ... 那么稍微改动一下，不要让这个原来的defineComponent作为默认导出： consttooltip=defineComponent({/** 里面一大坨 */})exportdefaulttooltipasanyas/** 这里开始类型体操🤸 */ 然后就很简单了： // 导出一个TooltipSlots类型供外界使用，并且写上jsdoc注释等...exportinterfaceTooltipSlots{/** * ## 默认插槽，承载Tooltip的内容 */default?: any/** * ## 触发插槽，用来定义触发元素 */trigger?: any}// 定义新版签名的类型typeOverloadTooltip=(props: TooltipProps,ctx: {slots: TooltipSlots})=>JSX.Element// 然后导出它exportdefaulttooltipasunknownasOverloadTooltip image.png (view on web) 这样外界就能拿到slots的类型提示了，唯一不好的地方就是要用那刺眼的as unknown as xxx强制转换，就有点麻，但是这样确实能完美的解决问题。 现在需要的是作者同意用这个办法来实现。如果 @07akioni 同意的话，工作量虽然大，但是我平时没什么事做，我来提这个PR也是没问题的；毕竟本身不涉及任何运行时的东西，全是类型体操🤸 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[Groupguanfang]

啊🤔️ option api我不太了解，还支持这样的阿，那岂不是更方便了
工作量确实有点大，不过我有点时间，看看我来提交个PR试试吧

[Groupguanfang]

手动复制粘贴了几个钟头，终于弄好了。。

[Nakus0426]

牛逼老哥！😂👍，@07akioni 能合并那就太好了