styled-components - 如何使用 JSDoc 为 styled.div 提供属性类型？

Question

当我使用 VS Code 时，我可以添加一个jsconfig.json文件以通过 IntelliSense 获得类型帮助。我对切换到 TypeScript 不感兴趣，所以我在需要的地方使用 JSDoc 来注释类型。

我发现我可以像这样向给定组件添加道具：

const StyledNode = styled(
  /** @type {React.ComponentType<React.ComponentProps<Box> & {level: number}>} */ (Box)
)`
  margin-left: ${p => p.level * 3}em;
`

这是零成本：在使用 StyledNode 以及level在 CSS 中使用时，我都会获得类型帮助。

但是，如果我想设置一个常规的样式div，我必须这样做

const StyledNode = styled(
  /** @type {React.ComponentType<React.DomAttributes & {level: number}>} */
  (React.forwardRef((p, ref) => <div ref={ref} {...p} />))
)`
  margin-left: ${p => p.level * 3}em;
`

这对我来说似乎不是零成本。问题是我看不到styled<type>通过 JSDoc 传递类型参数的方法。

向中的 css 模板函数提供参数类型的最佳方式是styled.div什么？

标签： styled-components

Answer 1

您可以导入import * as CSS from 'csstype'为全局

并使用 jsdoc 破解！

前任： @param {CSS.Property.FlexDirection} [props.flexDirection] - descriptions

您可以将软件包安装为 Dev 以避免污染，并且只能在 jsdoc 中使用。

npm i csstype -D -S

这对你有帮助吗？