使用带有 props 和 TypeScript 的 styled-components

Question

我正在尝试将 TypeScript 集成到我们的项目中，到目前为止，我偶然发现了 styled-components 库的一个问题。

考虑这个组件

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: Props) => p.width};
  height: ${(p: Props) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px"
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { onPress, src, width, height } = this.props;
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon source={src} width={width} height={height} />
      </TouchableOpacity>
    );
  }
}

export default TouchableIcon;

以下行引发 3 个错误，本质上相同 <Icon source={src} width={width} height={height} />

输入{来源：任何；宽度：字符串； height: string;} 不可分配给类型 IntrinsicAttributes … {source: any; 类型中缺少属性“onPress”宽度：字符串；高度：字符串；}

不完全确定这是什么以及如何解决它，我是否需要在 Icon 或类似的东西上声明这些？

编辑： 打字稿 v2.6.1 ，样式组件 v2.2.3

原文由 Ilja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个答案已经过时了，最新的答案在这里： https ://stackoverflow.com/a/52045733/1053772

据我所知，没有官方方法（还没有？）可以做到这一点，但你可以用一些技巧来解决它。首先，创建一个 withProps.ts 文件，内容如下：

 import * as React from 'react'
import { ThemedStyledFunction } from 'styled-components'

const withProps = <U>() => <P, T, O>(fn: ThemedStyledFunction<P, T, O>) =>
    fn as ThemedStyledFunction<P & U, T, O & U>

export { withProps }

现在，在您的 .tsx 文件中，像这样使用它：

 // ... your other imports
import { withProps } from './withProps'

export interface IconProps {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = withProps<IconProps>()(styled.Image)`
  width: ${(p: IconProps) => p.width};
  height: ${(p: IconProps) => p.height};
`;

你应该很高兴。这绝对 不是 理想的，希望很快会有一种方法在 TS 中为模板文字提供泛型，但我想现在这是你最好的选择。

在信用到期的地方给予信用：我从 这里 复制粘贴

原文由 Gian Marco Toso 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如 styled-components 文档 所说的最简单的方法：

 import styled from 'styled-components';
import Header from './Header';

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

原文由 Ehsan 发布，翻译遵循 CC BY-SA 4.0 许可协议