将样式化的组件与props和Typescript一起使用 [英] Using styled components with props and typescript

问题描述

我正在尝试将打字稿集成到我们的项目中，到目前为止，我偶然发现了一个与 styled-components 库

I'm trying to integrate typescript into our project and so far I stumbled upon one issue with styled-components library

考虑此组件

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

Following line throws 3 errors, that are same in nature <Icon source={src} width={width} height={height} />

类型{来源:任何；宽度:字符串；高度:字符串；}不可分配 键入IntrinsicAttributes ...类型中缺少属性"onPress" {来源:任何；宽度:字符串；高度:字符串；}

Type {source: any; width: string; height: string;} is not assignable to type IntrinsicAttributes ... Property 'onPress' is missing in type {source: any; width: string; height: string;}

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

Not entirely sure what this is and how to fix it, do I somehow need to declare these on Icon or something of this sort?

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

typescript v2.6.1, styled-components v2.2.3

推荐答案

此答案已过时，最新答案在此处:

This answer is outdated, the most current answer is here: https://stackoverflow.com/a/52045733/1053772

据我所知，还没有正式的方法(但是?)，但是您可以通过一些技巧来解决它.首先，创建具有以下内容的withProps.ts文件:

As far as I can tell there is no official way (yet?) to do this, but you can solve it with a bit of trickery. First, create a withProps.ts file with the following content:

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文件中，像这样使用它:

Now, inside your .tsx files, use it like this:

// ... 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中尽快为模板文字提供泛型，但我想目前这是您的最佳选择.

And you should be good to go. It's definitely not ideal and hopefully there will be a way to provide generics to template literals soon in TS, but I guess that for now this is your best option.

在应归功的地方提供信用:我从此处复制并粘贴了此

Credit is given where credit is due: I copypasted this from here

这篇关于将样式化的组件与props和Typescript一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！