Wrong `pipe` overload is used with React components and other generic function types

[OliverJAsh]

TypeScript Version: 3.5.2

Search Terms:

Code

import * as React from 'react';

declare type AnyFunction = (...params: any[]) => any;
declare type UnknownFunction = (...params: unknown[]) => unknown;

declare function pipe<A extends unknown[], B>(
    ab: (...a: A) => B,
): (...args: A) => B;
declare function pipe<A extends unknown[], B, C>(
    ab: (...a: A) => B,
    bc: (b: B) => C,
): (...args: A) => C;
declare function pipe(...fns: AnyFunction[]): UnknownFunction;

declare const myHoc: <Props>(
    ComposedComponent: React.ComponentType<Props>,
) => React.ComponentType<Props>;

{
    const Component = (props: {}) => <div />;
    
    // unknown, expected React.ComponentType<{}>
    const result = pipe(
        () => Component,
        myHoc,
    )();
}

{
    declare class Component extends React.Component<{}> {}

    // unknown, expected React.ComponentType<{}>
    const result = pipe(
        () => Component,
        myHoc,
    )();
}

{
    declare const Component: React.ComponentType<{}>;

    // expected and actual: React.ComponentType<{}>
    const result = pipe(
        () => Component,
        myHoc,
    )();
}

If we comment out the last pipe overload, it works as expected.

The same problem applies to other generic functions. Here's the smallest test case I could find:

type ComponentType<P> = {
    (p: P): null;
    p?: P;
};

declare const myHoc: <Props>(
    ComposedComponent: ComponentType<Props>,
) => ComponentType<Props>;

{
    declare const Component: (props: {}) => null;

    // unknown, expected ComponentType<{}>
    const result = pipe(
        () => Component,
        myHoc,
    )();
}

{
    declare const Component: ComponentType<{}>;

    // expected and actual: ComponentType<{}>
    const result = pipe(
        () => Component,
        myHoc,
    )();
}

[OliverJAsh]

Another workaround:

     const result = pipe(
         () => Component,
-        myHoc,
+        x => myHoc(x),
     )();

[ahejlsberg]

This is working as intended, at least as the overload resolution algorithm is currently designed. When we have multiple candidate signatures, we first attempt to find a candidate where every argument type is a subtype of the corresponding parameter type. If that fails we then try to find a candidate where every argument type is assignable to the corresponding parameter type. We do this so that arguments of type any are matched with parameters of type any if possible (instead of just matching anything in the first overload candidate).

In the example above, the type (props: {}) => null is assignable to, but not a subtype of, ComponentType<{}>, and therefore we end up picking the fallback overload. The x => myHoc(x) workaround succeeds because x is contextually typed to (props: {}) => null.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.