无法输入（通过 JSDoc）样式化组件属性

Question

我正在使用 Visual Studio Code 的 类型检查 Javascript 功能。 对于那些不熟悉的人来说，这可以实现推断类型，因此您可以获得在 VS Code 中键入的许多好处，而无需编写类型。

不幸的是，样式化组件库中基于模板标签的组件存在问题。 如果我有一个像这样的组件：

const ProductImage = styled.div`
  background-image: url("${props => props.imagePath}");
`;

VS Code 在

imagePath

下方添加了一条波浪线警告线（但不是

props.

），因为 Typescript 无法推断 props 参数的类型。

据我了解，Typescript 还可以从 JSDoc 获取类型，所以我尝试添加：

/**
 * @param {String} [props.imagePath]
 * @param {String} [props.alignRight]
 */
 const ProductImage = styled.div`
  background-image: url("${props => props.imagePath}");
  float: ${props => (props.alignRight ? `left` : `right`)}};
`;

...但这不起作用。

我没有

tsconfig.js

，但为了启用 JSDoc 输入，我尝试将以下内容添加到我的

jsconfig.js

：

// Generate d.ts files
"declaration": true,
// This compiler run should only output d.ts files
"emitDeclarationOnly": true

...但这也没有帮助。

我的问题是：

1. 是否可以输入样式组件道具？
2. 如果是这样，你可以使用 JSDoc 而不是显式的 TypeScript 代码来完成吗？
3. 如果是这样，当使用 VS Code 推断使用 Typescript（在 Javascript 文件中）时可以完成吗？

Answer 1

根据本指南，您需要使用通用调用才能使用自定义类型。

在打字稿中，它会是这样的：

const Button = styled.TouchableOpacity<ButtonProps>`
  opacity: ${(props) => (props.primary ? 0.5 : 1)};
`;

不幸的是，JSDoc 中没有等效的方法，但您可以使用强制转换。

所以你的代码需要类似于：

const styled = require('styled-components').default;

/**
 * @typedef {{
 *   imagePath: string;
 *   alignRight: boolean;
 * }} ProductImageProps */

const ProductImage =
  /** @type {import('styled-components').ThemedStyledFunction<'div', ProductImageProps>} */
  (styled.div)`
  background-image: url("${props => props.imagePath}");
  float: ${props => (props.alignRight ? `left` : `right`)}};
`;

看起来很奇怪的

/** @type {SomeType} */ (expression)

构造是 JSDoc 中进行强制转换的方式。括号是必需的。

请注意，您需要安装 @types/styled-components 作为开发依赖项。

注 2：我在本地设置中使用 JSDoc 对此进行了测试，但是我确实有一个 tsconfig.json 文件。

Answer 2

对于 styled-components v6，你可以这样解决：

/**
 * @type {import('styled-components').StyleFunction<{
 *     imagePath: string;
 *     alignRight: boolean;
 * }>}
 */
const ProductImage = styled.div`
    background-image: url("${(props) => props.imagePath}");
    float: ${(props) => (props.alignRight ? `left` : `right`)}};
`;

@types/styled-components 不再需要了。