Using styled-components with props and TypeScript

Question

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

Consider this component

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; 

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

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

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?

EDIT: typescript v2.6.1, styled-components v2.2.3

Answer 1

There have been some recent developments and with a new version of Typescript (eg. 3.0.1) and styled-components (eg. 3.4.5) there's no need for a separate helper. You can specify the interface/type of your props to styled-components directly.

interface Props {   onPress: any;   src: any;   width: string;   height: string; }  const Icon = styled.Image<Props>`   width: ${p => p.width};   height: ${p => p.height}; `; 

and if you want to be more precise and ignore the onPress

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