Incorrect typings for withComponent()

Version

2.2.3

Reproduction

I’m trying to pass Stateless Functional Component to withComponent() method. Everything works fine, but typescript complains about its type. It seems that StyledComponentClass interface is missing something like withComponent(element: StatelessComponent<P>): StyledComponentClass<P, T, O>; (not very familiar with typescript though).

Steps to reproduce

1. Pass Stateless Functional Component to withComponent() method.

Expected Behavior

Typescript not complaining about incompatible types.

Actual Behavior

Typescript complaining about incompatible types.

[patwritescode]

I’ve run into this issue, or at least a similar one, with the latest version of styled-components.

If I have a styled span for example as so:

import styled from "styled-components";

export default styled.span`
    color: green;
`

… and I use withComponent to use an anchor tag as so:

import styled from "styled-components";
import Span from "./span";

export default Span.withComponent("a");

I get type errors when trying to use props like href.

import * as React from "react";
import Link from "./link";

const Tests: React.SFC = () => {
    return (
        <Link href="test"/>        
    );
}

Compiling gives the following error:

error TS2559: Type '{ href: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>, ComponentState>> & Readonly<{ children?: ReactNode; }> & Readonly<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any>>'.

It seems to be because in the typings O = P will set that to the same type (in this example, the type of intrinsic span). Then, withComponent returns a StyledComponentClass where the third generic passed is O meaning if O = P in the parent then the withComponent result will have an intersected type with whatever that type was. In this case, span doesn’t have a prop href so we receive the error above.

export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<O, T>> {
  extend: ThemedStyledFunction<P, T, O>;

  withComponent<K extends keyof JSX.IntrinsicElements>(tag: K): StyledComponentClass<JSX.IntrinsicElements[K], T, O>;
  withComponent(element: ComponentClass<P>): StyledComponentClass<P, T, O>;
}

This is tough because we use styled-components in our internal shared ui library with typescript. So far we’ve had to just cast the export to a type that works but that excludes us from ever having a proper type for O where it doesn’t equal P and having it pass down through withComponent.

[6r1anchen]

@mbrowne @Igorbek I was hit with this bug today. I made a PR based on the work and discussion in #1283 and #1201 , I hope it is ok since they are not updated for a while.