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

Question

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

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

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

imagePathVS Code 在(但不是)下方添加了一条波浪线警告线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. 是否可以输入 Styled Components 属性？
2. 如果是这样，您可以使用 JSDoc 而不是显式的 TypeScript 代码来完成此操作吗？
3. 如果是这样，当使用 VS Code 推断使用 Typescript（在 Javascript 文件中）时可以完成吗？

Answer 1

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

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

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

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

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

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

看起来很奇怪的/** @type {SomeType} */ (expression)构造是 JSDoc 中如何进行强制转换。括号是必需的。

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

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