Question

我试图将打字稿集成到我们的项目中，到目前为止我偶然发现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} />

中是相同的

输入{source：any; width：string; height：string;}不可分配输入IntrinsicAttributes ...属性＆＃39; onPress＆＃39;在类型中缺失 {来源：任何; width：string; height：string;}

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

编辑： typescript v2.6.1，样式组件v2.2.3

Answer 1

最近有了一些进展，有了新版本的Typescript（例如3.0.1）和样式组件（例如3.4.5），就不需要单独的帮助器了。您可以直接为样式组件指定道具的界面/类型。

interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = styled.Image<Props>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

，如果您想更精确一点，而忽略onPress

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

Answer 2

据我所知，没有正式方法（但是？）这样做，但你可以用一点技巧来解决它。首先，使用以下内容创建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中为模板文字提供泛型，但我想现在这是你最好的选择。

在信用到期时给予信用：我从here

复制了此信息

Answer 3

您只需要指定一个interface：

import { createGlobalStyle } from 'styled-components';

interface PropsGlobalStyle {
  dark: boolean
}

export default createGlobalStyle`
  body {
    box-sizing: border-box;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: ${(props:PropsGlobalStyled) => (props.dark ? '#FFF' : '#000')};
background-color: ${(props:PropsGlobalStyled) => (props.dark ? '#000' : '#FFF')};
  }
`;

Answer 4

样式组件

    import styled from 'styled-components';

interface Props {
    height: number;
}

export const Wrapper = styled.div<Props>`
    padding: 5%;
    height: ${(props) => props.height}%;
`;

索引

import React, { FunctionComponent } from 'react';
import { Wrapper } from './Wrapper';

interface Props {
    className?: string;
    title: string;
    height: number;
}

export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => (
    <Wrapper height={height} className={className}>
        {title}
    </Wrapper>
);

应该可以

Answer 5

我自己正在努力解决这个问题，但我认为问题在于您在样式化组件中使用了Props接口。尝试使用图像道具创建另一个界面，并在样式化组件中使用它：

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;
}


export interface ImageProps {
  src: string;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: ImageProps ) => p.width};
  height: ${(p: ImageProps ) => 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;

似乎工作，但我不想重复这些接口。希望其他人可以展示正确的方法，或者将ImageProps嵌入Props？

Answer 6

使用带有颜色属性的 ColorCard 示例

import styled from 'styled-components';

export const ColorCard = styled.div<{ color: string }>`
  background-color: ${({ color }) => color};
`;

使用带有props和打字稿的样式组件

6 个答案: