Pipe function + `React.memo` returns component with `any` props

TypeScript Version: 3.9.2

Search Terms: generic pipe pipeWith react memo HOC props any

Code

import * as React from 'react';

declare function pipeWith<A, B>(a: A, ab: (a: A) => B): B;

type Props = { foo: number };
declare const MyComponent: React.FunctionComponent<Props>;

// ✅ correct props type
// React.NamedExoticComponent<Props>
const r1 = React.memo(MyComponent);

// ❌ `any` props type
// React.MemoExoticComponent<React.ComponentType<any>>
const r2 = pipeWith(MyComponent, React.memo);

// Workaround
// ✅ correct props type
// React.NamedExoticComponent<Props>
const r3 = pipeWith(MyComponent, (C) => React.memo(C));

Using latest version of @types/react (at the time of writing: 16.9.35).

Expected behavior:

See above.

Actual behavior:

See above.

Playground Link:

https://stackblitz.com/edit/react-ts-4ih6jn

Related Issues:

https://github.com/microsoft/TypeScript/issues/25637, although that was closed as a duplicate of an issue which has since been closed (https://github.com/microsoft/TypeScript/issues/10957), so I decided to post a new issue.

[dragomirtitian]

@RyanCavanaugh Hope this helps:

// The presence of any overloads confuses inference, leave just one of them in and everything works
declare function memo<T>(Component: T): T;
declare function memo<T>(Component: T): T;

declare function pipeWith<A, B>(a: A, ab: (a: A) => B): B;

type Props = { foo: number };
declare const MyComponent: Props;

// ✅ correct props type
// Props
const r1 = memo(MyComponent);

// ❌ `unknown` props type
// unknown
const r2 = pipeWith(MyComponent, memo);

// Workaround
// ✅ correct props type
// Props
const r3 = pipeWith(MyComponent, (C) => memo(C));

Playground Link

Just the presence of any overloads will confuse the inference on the original use case. Leave just the one signature and everything works as expected.

[OliverJAsh]

I’m running into this all of the time, not just when using React.memo.

Example using Object.values:

declare function pipe<A, B>(a: A, ab: (a: A) => B): B;

// Type of `value1` is `any[]`, expected `(string | number)[]`
const value1 = pipe({ foo: 1, bar: 'abc' }, Object.values);
// Workaround:
const value2 = pipe({ foo: 1, bar: 'abc' }, (x) => Object.values(x));

Playground here.

Here’s another example when using RxJS v7 (7.0.0). I’ve reduced the test case down further in this playground.

import { lastValueFrom, of } from 'rxjs';
import { tap } from 'rxjs/operators';

declare function pipe<A, B>(a: A, ab: (a: A) => B): B;

//
// `of` example
//

{
    // Type of `value1` is `Observable<never>`, expected `Observable<string>`
    const value1 = pipe('foo', of);
    // Workaround:
    const value2 = pipe('foo', (x) => of(x));
}

//
// `lastValueFrom` example
//

pipe(of('foo'), lastValueFrom).then((x) => {
    // Type of `x` is `unknown`, expected `string`
    x;
});
// Workaround:
pipe(of('foo'), (ob) => lastValueFrom(ob)).then((x) => {
    x;
});

//
// `tap` example
//

declare const hof: <T>(g: (t: T) => void) => (t: T) => void;

of('foo').pipe(
    tap(
        hof((x) => {
            // Type of `x` is `unknown`, expected `string`
            x;
        }),
    ),
);
// Workaround:
of('foo').pipe(
    tap((value) =>
        pipe(
            value,
            hof((x) => {
                x;
            }),
        ),
    ),
);