[TS] Proposal: add helper method for adding types to props

Hi everyone!

I been seeing a lot of frustration on declaring components with TypeScript, especially with stateless ones. It is quite hard/repetitive to add an interface to the props. So I was thinking that we can provide an helper function for this, something along the lines of:

import styled from "styled-components";

interface ImageProps {
  fade: boolean;
}

const Img =styled.img.ts.withInterface<ImageProps>()`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  opacity: ${(props) => props.fade ? 0.3 : 1};
`;

It is a bit ugly but it could work. @Igorbek what do you think?

PS. This will be solved when this issue gets fixed: https://github.com/Microsoft/TypeScript/issues/11947 but in the meanwhile this proposal can be a good workaround.

[clayne11]

The alternative is defining the use a string inside of styled() such as styled('div'). We can augment the style definitions like so:

export interface ThemedBaseStyledInterface<T> {
  <P>(component: Component<P> | ComponentString): ThemedStyledFunction<P, T>;
}

export type ComponentString = (
  'a' |
  'abbr' |
  'address' |
  'area' |
  'article' |
  'aside' |
  'audio' |
  'b' |
  'base' |
  'bdi' |
  'bdo' |
  'big' |
  'blockquote' |
  'body' |
  'br' |
  'button' |
  'canvas' |
  'caption' |
  'cite' |
  'code' |
  'col' |
  'colgroup' |
  'data' |
  'datalist' |
  'dd' |
  'del' |
  'details' |
  'dfn' |
  'dialog' |
  'div' |
  'dl' |
  'dt' |
  'em' |
  'embed' |
  'fieldset' |
  'figcaption' |
  'figure' |
  'footer' |
  'form' |
  'h1' |
  'h2' |
  'h3' |
  'h4' |
  'h5' |
  'h6' |
  'head' |
  'header' |
  'hgroup' |
  'hr' |
  'html' |
  'i' |
  'iframe' |
  'img' |
  'input' |
  'ins' |
  'kbd' |
  'keygen' |
  'label' |
  'legend' |
  'li' |
  'link' |
  'main' |
  'map' |
  'mark' |
  'menu' |
  'menuitem' |
  'meta' |
  'meter' |
  'nav' |
  'noscript' |
  'object' |
  'ol' |
  'optgroup' |
  'option' |
  'output' |
  'p' |
  'param' |
  'picture' |
  'pre' |
  'progress' |
  'q' |
  'rp' |
  'rt' |
  'ruby' |
  's' |
  'samp' |
  'script' |
  'section' |
  'select' |
  'small' |
  'source' |
  'span' |
  'strong' |
  'style' |
  'sub' |
  'summary' |
  'sup' |
  'table' |
  'tbody' |
  'td' |
  'textarea' |
  'tfoot' |
  'th' |
  'thead' |
  'time' |
  'title' |
  'tr' |
  'track' |
  'u' |
  'ul' |
  '"var"' |
  'video' |
  'wbr' |
  'circle' |
  'clipPath' |
  'defs' |
  'ellipse' |
  'g' |
  'image' |
  'line' |
  'linearGradient' |
  'mask' |
  'path' |
  'pattern' |
  'polygon' |
  'polyline' |
  'radialGradient' |
  'rect' |
  'stop' |
  'svg' |
  'text' |
  'tspan'
)

Then we can call:

interface MyProps

const StyledWithProps = styled<MyProps>('div')`
`

[flexzuu]

@clayne11 I understand this approach but i get a implicit any warning for the arguments passed to the functions inside the tagged literal. Is there anything else i need to to to get this working?

I was thinking about building a monkey patch that converts the functions on styled components like styled.div to a higher oder function like styled.div() where you could pass the tye arguments more easyly

styled.div<Props>()`styles here`