TypeScript props interface is cast to never when theme prop is not given and BaseStyledInterface is used

This line (L66) was recently added, and it causes an edge case in a very specific (but common) use case:

https://github.com/styled-components/styled-components/blob/62ae36eeb6ddf43ec2f1d5b8e0546dd8df47b15d/typings/styled-components.d.ts#L65-L68

Here we set the theme prop to be optional when P extends { theme?: T; }. But by default T is any in the exposed BaseStyledInterface.

This causes WithOptionalTheme to exhibit the bug. It then casts P to never. That means that the resulting interface is just: { theme?: any }.

The bug disappears when T is not any, meaning when theme is set to something else.

Here is an image of @JonWallsten’s reproduction: http://imgur.com/a/i1GrD

The interface of ICombinedSpinButton is:

export interface ICombinedSpinButton extends IAutoplayButton {
  autoplayActive?: boolean
  autoplayRunning?: boolean
  hidden?: boolean
}

(Ignore the extend, it’s irrelevant)

Note that the theme property is not cast to a type.

cc @Igorbek

[kitten]

I’ll release a minor version today containing this fix

[avindra]

interface Props extends React.HTMLProps<HTMLImageElement> {
  isOpen?: boolean;
}

const DumbBox =  ({ isOpen }: Props) => (
  <img width={isOpen ? "50px" : "25px"} src="blah" />
);

const StyledDumbBox = styled(DumbBox)`
  color: red;
`;

This will throw an error in StyledDumbBox

Reverting to 2.1.1 fixes the build error.