Regression on inference of "old style" recursive interfaces in 3.7.x

[Jessidhia]

TypeScript Version: 3.7.1-rc

Search Terms: recursive

Code

// I'm going to try to reduce this, the report is a WIP
// uses @types/styled-components
import styled from 'styled-components'

// "no overload matches this call"
const Component = styled.div`${({ foo }: { foo: string }) => foo}`

Expected behavior:

To build the same as in 3.6. While recursive types are a new feature, they shouldn't affect how recursive interface extends work.

Actual behavior:

"No overload matches this call" unless the export interface FlattenInterpolation<P> extends ReadonlyArray<Interpolation<P>> {} in the @types/styled-components definition is edited to be export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>> instead; this edit is sufficient to fix all type errors, but would make the types incompatible with typescript <3.7.0.

No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, Theme>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '({ foo }: { foo: boolean; }) => boolean' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; }, Theme>>'.
      Type '({ foo }: { foo: boolean; }) => boolean' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; }, Theme>>'.
        Types of parameters '__0' and 'props' are incompatible.
          Property 'foo' is missing in type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ThemeProps<...>' but required in type '{ foo: boolean; }'.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | ... 253 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, Theme>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '({ foo }: { foo: boolean; }) => boolean' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, Theme>>'.
      Type '({ foo }: { foo: boolean; }) => boolean' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, Theme>>'.
        Type 'boolean' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "id" | "children" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, Theme>>'.

Playground Link: TODO

Related Issues: maybe #33872 but probably not

EDIT: I've spent about 2h on this but I still am failing to reduce it to a failing case... will probably have to revisit tomorrow. There definitely is something here, though, but I don't know yet what I am missing in the attempt so far; it's possible trying to simplify React to just being a function call / ignoring object styles to simplify things is also avoiding the bug.

[jonathaningram]

@Jessidhia and @RyanCavanaugh I've made a repro for this https://github.com/jonathaningram/ts-34796

I've no idea what's going on though. You can see in the commit (jonathaningram/ts-34796@fbd9755) that caused this to fail it was me adding in react-router-dom and converting my Link styled component from a wrapper around an anchor to a wrapper around react router's Link.

I hope this repro helps—we extracted it from our app into minimal a codebase as possible.