Issue 1:
I tried using the @types/styled-components package and had problems.

I tried using the latest stable version of tsc: 3.6.4

I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).

Mention the authors (see Definitions by: in types/styled-components/index.d.ts) so they can respond.

Authors: @Igorbek, @Igmat, @lavoaster, @Jessidhia, @jkillian, @eps1lon, @flavordaaave, @wagerfield

From styled-components/styled-components#2823:

Environment

System:

OS: macOS 10.15

CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz

Memory: 8.08 GB / 32.00 GB

Shell: 5.7.1 - /bin/zsh

Binaries:

Node: 12.12.0 - /usr/local/bin/node

npm: 6.11.3 - /usr/local/bin/npm

npm Packages:

react: ^16.10.2 => 16.10.2

styled-components: ^4.4.0 => 4.4.0

@types/react: ^16.9.9 => 16.9.9

@types/styled-components: ^4.1.19 => 4.1.19

typescript: ^3.6.4 => 3.6.4

Reproduction

TypeScript playground

Source, in case the TypeScript playground link above doesn’t work

import React from 'react'
import styled from 'styled-components';

// Types
interface RainyDayProps {
type: "rainy";
showUmbrellaIcon: boolean;
}
interface SunnyDayProps {
type: "sunny";
showSunscreenIcon: boolean;
}
type WeatherWidgetProps = RainyDayProps | SunnyDayProps;

// Normal components
function WeatherWidget(props: WeatherWidgetProps): JSX.Element {
let widget = "widget";

if (props.type === "rainy") {
widget = props.showUmbrellaIcon ? "☂️" : "umbrella";
} else if (props.type === "sunny") {
widget = props.showSunscreenIcon ? "🧴" : "sunscreen";
}

return <div>Remember your {widget}!</div>;
}
export const RainyDayComponent = <WeatherWidget type="rainy" showUmbrellaIcon={true} />;
export const SunnyDayComponent = <WeatherWidget type="sunny" showSunscreenIcon={true} />;

// Styled components
const StyledWeatherWidget = styled(WeatherWidget)``
export const StyledRainyDayComponent = <StyledWeatherWidget type="rainy" showUmbrellaIcon={true} />;
export const StyledSunnyDayComponent = <StyledWeatherWidget type="sunny" showSunscreenIcon={true} />;

Steps to reproduce

When a union type is passed as styled-component’s type argument, the TypeScript compiler errors. See the TypeScript playground link above—StyledWeatherWidget has red squiggles.

Expected Behavior

Both interfaces in the union type are valid contracts for the type of the styled React component’s props. As shown in the playground, the unwrapped React component accepts either set of props. Wrapping the React component with styled-components should not cause a TypeScript compiler error.

Actual Behavior

index.tsx:37:4 - error TS2322: Type '{ type: "rainy"; showUmbrellaIcon: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<WeatherWidgetProps, "type"> & Partial<Pick<WeatherWidgetProps, never>>, "type"> & { theme?: any; } & { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }'.
Property 'showUmbrellaIcon' does not exist on type 'IntrinsicAttributes & Pick<Pick<WeatherWidgetProps, "type"> & Partial<Pick<WeatherWidgetProps, never>>, "type"> & { theme?: any; } & { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }'.

37 <StyledWeatherWidget type="rainy" showUmbrellaIcon={true} />
~~~~~~~~~~~~~~~~~~~

index.tsx:40:4 - error TS2322: Type '{ type: "sunny"; showSunscreenIcon: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<WeatherWidgetProps, "type"> & Partial<Pick<WeatherWidgetProps, never>>, "type"> & { theme?: any; } & { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }'.
Property 'showSunscreenIcon' does not exist on type 'IntrinsicAttributes & Pick<Pick<WeatherWidgetProps, "type"> & Partial<Pick<WeatherWidgetProps, never>>, "type"> & { theme?: any; } & { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }'.

40 <StyledWeatherWidget type="sunny" showSunscreenIcon={true} />
~~~~~~~~~~~~~~~~~~~

Issue 2:
I tried using the @types/styled-components package and had problems.

I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript

I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).

Mention the authors (see Definitions by: in index.d.ts) so they can respond.

Authors: @Igorbek, @Igmat, @lavoaster, @Jessidhia, @jkillian, @eps1lon, @flavordaaave

Subject Says It All.

Code:

import styled from 'styled-components'

type Props = {
foo: number, bar?: undefined
} | {
foo?: undefined, bar: string
}

const C1 = (porps: Props) => <p />
const C2 = styled.p<Props>``

const T1 = <C1 foo={1} bar="str" /> // type error
const T2 = <C2 foo={1} bar="str" /> // no error