在 v6 中通过 JSDoc 使用 styled-components 属性

Question

如何使用 JSDoc 结合 tsconfig.json 和

tsc

来输入样式组件的 props。

在 TypeScript 中，使用简单的泛型就非常容易，不幸的是我无法使用 JSDoc 实现相同的目的。我会想象做这样的事情。

/** @type {import('styled-components').styled["div"]<{ $open: boolean }>} */
const ChildContent = styled.div`
  animation: ${p => p.$open ? slideOpen : slideClose};
`

我注意到 StyleFunction 可以工作，并且可以使用泛型提供道具。但是，此类型不包含有关组件的任何信息，仅包含组件的 props。因此，下面的代码不会显示任何错误，直到它与 ref 属性一起使用。

/** @type {import("styled-components").StyleFunction<{ $open: boolean }>} */
const ChildContent = styled.div`
  animation: ${p => p.$open ? slideOpen : slideClose};
`

// breaks here, 'ChildContent' cannot be used as a JSX component.
const Component = <ChildContent style={{ position: "absolute" }} $open={show} />

因此，另一种可能的解决方案是将其与另一个采用

Runtime

和

Target

的泛型相结合。但是，更好的是直接访问 Styled 中的泛型函数（导出为 StyledInstance）。

非常感谢任何可以帮助找到正确类型的人。

Answer 1

听起来您的 tcsconfig.json 上缺少几个属性。如果我没记错的话，要集成 JSDoc，如果你想让 JSDoc 正常工作，你需要添加这个道具。

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
     ... rest of your configuration
  },
  ... rest of your configuration
}

您的组件和类型可能需要看起来与此类似：

/**
 * @typedef {Object} Props
 * @property {boolean} $open
 */

/**
 * @type {import('styled-components').StyledComponent<'div', any, Props, never>}
 */
const ChildContent = styled.div`
  animation: ${p => p.$open ? slideOpen : slideClose};
`;