如何使用 JSDoc 记录样式化的组件道具？ [复制]答案

【问题标题】：How to use JSDoc to document styled components props? [duplicate]如何使用 JSDoc 记录样式化的组件道具？ [复制]
【发布时间】：2022-01-31 01:57:59
【问题描述】：

我曾尝试在我的自定义样式组件上多次使用 JSDoc 记录 vscode 上的道具，但我无法让它以任何方式显示。

我尝试过使用以下语法：

/**
 * @param {boolean} testprop - 20px
 */
export const Text``

export interface TextProps {
  /* 20px */ t2?: boolean
}
export const Text<TextProps>``

到目前为止，这两个都不起作用。

有什么方法可以让它在你悬停道具时显示出来？
对此的最佳做法是什么？

【问题讨论】：

文档是否应该与它描述的组件一起使用？ IE。第二个带有t2 属性的Text 组件？
我不明白你的意思。当您将 t2 悬停在 <Text t2 上时，我想要它。我用第二种语法（在界面上）解决了这个问题，但用/**而不是/*
我指的是您记录了export const Text`` 组件但没有记录export const Text<TextProps>`` 组件的事实。但我想我明白你现在的意思了。您想对界面进行 jsdoc 处理。

标签： reactjs typescript visual-studio-code styled-components jsdoc

【解决方案1】：

这个语法对我有用：

export interface TextProps {
  /** 20px */ t2?: boolean
}
export const Text<TextProps>``

请注意，注释以 2 个星号 (/**) 开头

现在我可以将鼠标悬停在t2 并获取我之前设置的评论。

【讨论】：