Using styled-components with props and TypeScript
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
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};
`;
This answer is outdated, the most current answer is here: https://stackoverflow.com/a/52045733/1053772
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 }
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};
`;
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
styled-component
import styled from 'styled-components';
interface Props {
height: number;
}
export const Wrapper = styled.div<Props>`
padding: 5%;
height: ${(props) => props.height}%;
`;
index
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>
);
should work