是否可以在样式化组件的界面中添加注释/提示，如果可以，如何？答案

【问题标题】：Is adding comments/hints to a interface on a styled component possible and if so, how?是否可以在样式化组件的界面中添加注释/提示，如果可以，如何？
【发布时间】：2022-04-08 03:04:11
【问题描述】：

我的样式化组件上有一个接口，其中包含每个属性的类型提示。如下图：

interface PBProps {
    color: Colours;
    bgColor: Colours;
    /** for example: 10px or 10% */
    height: string; 
    paddingLR: string;
    fontSize: string;
    width: string;
    margin: string;
    fontWeight: string;
}

当您将鼠标悬停在实际元素的高度上时，这个想法就是如此。我有一个评论节目。

所以它在具有(JSX attribute) height: string 的同一个框中显示“例如：10px 或 10%”

我知道你可以这样做：

/**
 * @param {string} height // comment
 */

但这并没有达到我希望达到的效果。这甚至可能吗。 2天的搜索已经够远了！我的google FU不够强！

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

我知道这是一个老问题，但以防万一其他人遇到这个问题，这就是我发现的......

我认为您的问题的简短回答是“不”。 styled-components 文档确实提到了 syntax highlighting，但据我所知，没有关于如何记录样式组件的建议。通过语法突出显示，您可以看到支持内联 cmets（// ... 或 /* ... */），但看起来没有任何编辑器/扩展将它们解析为您希望的 per-prop 提示。

您至少（在 VS Code 中）提到的正常 JSDoc / TSDoc 语法（在样式组件上方）会在将鼠标悬停在组件本身而不是每个道具上时显示一些文档。 This answer 声称可以这样做，但我无法在 VS Code 中使用它。你可能想联系 JSDoc 和 TSDoc 社区，或者查看像 this one 这样的包，它们会提供特定于 react 的文档。

【讨论】：