Add static properties to component using TypeScript

I am trying to add properties to the constructor produced by styled components using TypeScript.

What I want to do:

type JSXButtonProps = JSX.IntrinsicElements['button'];

export interface ButtonProps extends JSXButtonProps {
  theme?: ThemeBase;
}

const ButtonInner = ({ theme, ...rest }: ButtonProps) => <button {...rest} />;

export const Button = styled(ButtonInner)(
  (props: ButtonProps): CSSEntry => get(props.theme, 'button.extend'),
);

Button.Primary = props => <Button />;

Which produces the error:

error TS2339: Property 'Primary' does not exist on type 'StyledComponent<FunctionComponent<ButtonProps>, ThemeBase, {}, never>'.

What works (casting to any):

export const Button = styled(ButtonInner)(
  (props: ButtonProps): CSSEntry => get(props.theme, 'button.extend'),
);

(Button as any).Primary = props => <Button />;

I’d like to avoid this, so I looked into re-creating my own ButtonInterface, but the typings are so complex, I can’t figure out where to start. For instance I see StyledComponent<...> but this is a generic type which cannot be extended, so that won’t work. I’ve tried making the type and joining in the additional static class properties, but that hasn’t worked either.

My latest attempt has been to do:

interface ButtonAliases extends StyledComponentBase<any, any, any, any> {
  Primary: any;
  Secondary: any;
  Tertiary: any;
  Icon: any;
}

export const Button: ButtonAliases = styled(ButtonInner)(...);

But this does not work either, I get the error:

error TS2322: Type 'StyledComponent<({  theme, ...rest }: ButtonProps) => Element, ThemeBase, {}, never>' is not assignable to type 'ButtonAliases'.

Any help or suggestions would be great, thank you!

[tbranyen]

@probablyup no worries (I can empathize), it is possible someone will find this closed issue and comment with an answer too 😉

[probablyup]

I’ll refine the website copy to be a bit more explicit that the typings are non-official, thank you for the feedback. I get your frustration; it’s just difficult to keep a tidy issue tracker when stuff we don’t maintain is in it. On Thu, Jan 10, 2019 at 4:26 PM Tim Branyen [e-mail] wrote:

I will say it’s rather frustrating to use a library that promotes and touts TypeScript support and has near “official” typings, but then to be anti-questions when the documentation is not sufficient. I hope I find an answer through the DefinitelyTyped issue tracker, because I really think this is the most googleable and relevant location for the question.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2317#issuecomment-453279014, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1hEheouddqJ8OWRp51j02xGQyCuFks5vB737gaJpZM4Z6bN_ .