styled-factory.tsx

import * as React from 'react';
import styled from 'styled-components';
import { ComponentClass, StatelessComponent } from 'react';

export type Component<P> = ComponentClass<P> | StatelessComponent<P>;

interface FooProps {
  message: string,
  primary: boolean,
};

interface NewComponentProps {
  message: string,
};

const getTestComponent = ({ Foo }: { Foo: Component<FooProps> }): Component<NewComponentProps> => {
  return class NewComponent extends React.Component<NewComponentProps, void> {
    render() {
      return (
        <Foo message={this.props.message} primary />
      )
    }
  }
}

// Autocompletes as expected and works
const NormalTestComponent = getTestComponent({
  Foo: (props) => (
    <div>{props.message}</div>
  ),
})

// Styled Components does not autocomplete on interpolation and doesnt work
const StyledTestComponent = getTestComponent({
  Foo: styled.div`
    background: ${(props: NewComponentProps) => props.primary ? 'red' : 'purple'};
  `,
});