fix(react): unions in prop types are not resolved

[dewey92]

Motivation

Suppose I have:

type GridProps =
  | { container?: false }
  | { container: true; spacing: number }
declare const Grid: React.FC<GridProps & { className?: string }>

// ❌ should not compile
const testGrid = <Grid container={false} spacing={8} />

/**
Type '{ container: false; spacing: number; }' is not assignable to type 'IntrinsicAttributes & PropsWithChildren<GridProps & { className?: string | undefined; }>'.
     Property 'spacing' does not exist on type 'IntrinsicAttributes & { container?: false | undefined; } & { className?: string | undefined; } & { children?: ReactNode; }'.
*/

// ✅ compiles
const testGrid = <Grid container={true} spacing={8} />

The idea is to have an extra guard where you can only pass spacing as a prop when container is true. But unfortunately the current typing doesn't handle this case very well yet: passing this component to linaria's styled doesn't even compile.

const LinariaGrid = styled(Grid)``

and yields this rather long error message:

No overload matches this call.
     Overload 1 of 3, '(tag: (FunctionComponent<{ container?: false | undefined; } & { className?: string | undefined; }> & FC<GridProps & { className?: string | undefined; }>) | (FunctionComponent<...> & FC<...>)): ComponentStyledTag<...>', gave the following error.
       Argument of type 'FC<GridProps & { className?: string | undefined; }>' is not assignable to parameter of type '(FunctionComponent<{ container?: false | undefined; } & { className?: string | undefined; }> & FC<GridProps & { className?: string | undefined; }>) | (FunctionComponent<...> & FC<...>)'.
         Type 'FunctionComponent<GridProps & { className?: string | undefined; }>' is not assignable to type 'FunctionComponent<{ container?: false | undefined; } & { className?: string | undefined; }> & FC<GridProps & { className?: string | undefined; }>'.
           Type 'FunctionComponent<GridProps & { className?: string | undefined; }>' is not assignable to type 'FunctionComponent<{ container?: false | undefined; } & { className?: string | undefined; }>'.
             Types of property 'propTypes' are incompatible.
               Type 'WeakValidationMap<GridProps & { className?: string | undefined; }> | undefined' is not assignable to type 'WeakValidationMap<{ container?: false | undefined; } & { className?: string | undefined; }> | undefined'.
                 Type 'WeakValidationMap<{ container: true; spacing: number; } & { className?: string | undefined; }>' is not assignable to type 'WeakValidationMap<{ container?: false | undefined; } & { className?: string | undefined; }>'.
                   Types of property 'container' are incompatible.
                     Type 'Validator<true> | undefined' is not assignable to type 'Validator<false | null | undefined> | undefined'.
                       Type 'Validator<true>' is not assignable to type 'Validator<false | null | undefined>'.
                         Type 'true' is not assignable to type 'false | null | undefined'.
     Overload 2 of 3, '(tag: ComponentType<{ container?: false | undefined; } & { className?: string | undefined; }> | ComponentType<{ container: true; spacing: number; } & { className?: string | undefined; }>): ComponentStyledTag<...>', gave the following error.
       Argument of type 'FC<GridProps & { className?: string | undefined; }>' is not assignable to parameter of type 'ComponentType<{ container?: false | undefined; } & { className?: string | undefined; }> | ComponentType<{ container: true; spacing: number; } & { className?: string | undefined; }>'.
         Type 'FunctionComponent<GridProps & { className?: string | undefined; }>' is not assignable to type 'FunctionComponent<{ container?: false | undefined; } & { className?: string | undefined; }>'.
           Types of property 'propTypes' are incompatible.
             Type 'WeakValidationMap<GridProps & { className?: string | undefined; }> | undefined' is not assignable to type 'WeakValidationMap<{ container?: false | undefined; } & { className?: string | undefined; }> | undefined'.
               Type 'WeakValidationMap<{ container: true; spacing: number; } & { className?: string | undefined; }>' is not assignable to type 'WeakValidationMap<{ container?: false | undefined; } & { className?: string | undefined; }>'.
                 Types of property 'container' are incompatible.
                   Type 'Validator<true> | undefined' is not assignable to type 'Validator<false | null | undefined> | undefined'.
                     Type 'Validator<true>' is not assignable to type 'Validator<false | null | undefined>'.
                       Type 'true' is not assignable to type 'false | null | undefined'.
     Overload 3 of 3, '(tag: keyof IntrinsicElements): HtmlStyledTag<keyof IntrinsicElements>', gave the following error.
       Argument of type 'FC<GridProps & { className?: string | undefined; }>' is not assignable to parameter of type 'keyof IntrinsicElements'.
         Type 'FunctionComponent<GridProps & { className?: string | undefined; }>' is not assignable to type '"view"'.

This is because the union type is distributed when acted on a conditional type, as described here.

Summary

The fix is quite simple: we add an extra bracket to every position in which the "prop" type variable is mentioned e.g [T] extends React.ComponentType<any> ? ... : ... to make the type non-distributive.

[Anber]

Thank you so much!
I also faced that problem after upgrade to ts 4.4, but didn't have enough time to investigate it.

[dewey92]

I can create another PR for the master branch, or you can also do it by yourself :)

[Anber]

I'll cherry-pick it. Thank you!