无法键入（通过 JSDoc）样式化的组件道具

Question

我正在使用 Visual Studio 代码的 Type-Checking Javascript 功能。对于那些不熟悉的人，这会启用推断类型，因此您可以在 VS Code 中获得很多好处，而无需编写类型。

不幸的是，Styled Components 库中基于模板标签的组件存在问题。如果我有这样的组件：

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

VS Code 添加了一个波浪形的警告线，就在 imagePath 下方（但不是 props.），因为 Typescript 无法推断 props 参数的类型。

据我了解，Typescript也可以get types from 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

...但也无济于事。

我的问题是：

是否可以输入 Styled Components 道具？
如果是这样，你能用 JSDoc 来代替显式的 TypeScript 代码吗？
如果是这样，在使用 VS Code 推断使用 Typescript（在 Javascript 文件中）时是否可以完成？

Answer 1

基于this guide，您需要使用泛型调用才能使用自定义类型。

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

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 文件。

无法键入（通过 JSDoc）样式化的组件道具

Unable to Type (Via JSDoc) Styled Component Props

jsdoc

typescript

styled-components