Repository navigation
Regression on inference of "old style" recursive interfaces in 3.7.x #34796
Description
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.
Details
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.
Activity
jonathaningram commentedon Nov 7, 2019
Jessica Franco (@Jessidhia) and Ryan Cavanaugh (@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-domand converting myLinkstyled component from a wrapper around an anchor to a wrapper around react router'sLink.I hope this repro helps—we extracted it from our app into minimal a codebase as possible.
[styled-components] Add support for TypeScript 3.7
[styled-components] Update for TS 3.7
[styled-components] Update for TypeScript 3.7 (#40209)
8 remaining items
RyanCavanaugh commentedon Feb 14, 2023
The linked repo now compiles without (that) error in TS 5.0.