Unexpected error when using generic with Pick and Exclude

[OliverJAsh]

TypeScript Version: 3.2.1

Search Terms: generic pick exclude

Code

//
// Example 1
//

const fn = <Params extends {}>(
    params: Pick<Params, Exclude<keyof Params, never>>,
): Params =>
    // Unexpected error
    /* Type 'Pick<Params, Exclude<keyof Params, never>>' is not assignable to type 'Params'. */
    params;

//
// Example 2
//

import * as React from 'react';
import { ComponentType, FunctionComponent } from 'react';

type User = { name: string };
type UserProp = { user: User };

export const myHoc = function<ComposedComponentProps extends UserProp>(
    ComposedComponent: ComponentType<ComposedComponentProps>,
) {
    // These two should be equivalent, but they're not?
    // Doesn't work:
    type Props = Pick<
        ComposedComponentProps,
        Exclude<keyof ComposedComponentProps, never>
    >;
    // Works:
    // type Props = ComposedComponentProps;

    const Component: FunctionComponent<Props> = props => (
        // Unexpected error
        /* Type 'PropsWithChildren<Pick<ComposedComponentProps, Exclude<keyof ComposedComponentProps, never>>>' is not assignable to type 'IntrinsicAttributes & ComposedComponentProps & { children?: ReactNode; }'.
            Type 'PropsWithChildren<Pick<ComposedComponentProps, Exclude<keyof ComposedComponentProps, never>>>' is not assignable to type 'ComposedComponentProps'. */
        <ComposedComponent {...props} />
    );

    return Component;
};

[iiroj]

I am also having this issue with version 3.2.1. The following code used to work before:
https://github.com/iiroj/breakpoint-observer/blob/52baadc23179d959f047cc07a67c0954b692778a/index.tsx#L163

EDIT:

I was able to work around this issue like so:
https://github.com/iiroj/breakpoint-observer/commit/4d24c19f19e140542a6e077b88005777543cbcad

[deftomat]

Similar issue: https://stackoverflow.com/questions/53556160/react-hoc-and-typescript-3-2

[sledorze]

Same problems here too.
Lost a day finding workarounds in our big monorepo..

[Nerlin]

Same problem for me.
Broke my typing:

export type Injector<P> = <T extends P>(Component: React.ComponentType<T>) => React.ComponentType<Subtract<T, P>>;
export type Subtract<T, K> = Omit<T, keyof K>;
export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

const withContext: Injector<Context> = (Component) => (props) => (
  <ContextProvider>{(context) => <Component {...context} {...props} />}</ContextProvider>
);

[jkillian]

@sledorze just curious, did you find any satisfactory workarounds for this? Unfortunately it's preventing us from upgrading to TS 3.2 at the moment

[sledorze]

@jkillian not using Pick, not relying on key selection.

going from something like

export const myHoc = function<ComposedComponentProps extends UserProp>(
  ComposedComponent: ComponentType<ComposedComponentProps>,
) ... ```

to

```ts
export const myHoc = function<ComposedComponentProps>(
  ComposedComponent: ComponentType<ComposedComponentProps & UserProp>,
)

Unfortunately, the downside is that the types you are using must be some explicit intersection in order to infer the types correctly.

That means no more using interfaces.

I hope Typescript will provide some means to tackle this (maybe that's the case with the last version, but I'm slashing code on the backend ATM - so will not be using Typescript until 2019..).

[vict-shevchenko]

It will be great to hear from @typescript team if this is really a bug in 3.2.2 version or it means that previously our react HOC were typed incorrectly.

I have tried adopting a @iiroj proposed workaround, and it actually fixes TS error in HOC, but cause another issue. TS requires an injected prop on the wrapped component.

Example

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
type Subtract<T, K> = Omit<T, keyof K>;

interface IName {
  name: string;
}

function withName<P extends IName>(Component: React.ComponentType<P>) {
  return class WithName extends React.Component<Subtract<P, IName>> {
    public render() {
      return (
        <NameContext.Consumer>
          {(name: string)  => <Component {...this.props} name={name} />}
                                            ^^^^^ Type 'Readonly<{ children?: ReactNode; }> & Readonly<Pick<P, Exclude<keyof P, "name">>> & { name: string; }' is not assignable to type 'P'.ts(2322)
        </NameContext.Consumer>
      );
    }
};

when I replace

function withName<P extends {}>(Component: React.ComponentType<P & IName>) {
  return class WithName extends React.Component<P> {
    public render() {
      return (
        <NameContext.Consumer>
          {(name: string)  => <Component {...this.props} name={name} />}
        </NameContext.Consumer>
      );
    }
};

const Named = withName(WitoutName);

<Named /> // TS Error - property 'name' is missing

I don't really want to make name prop on IName interface optional. As in 3.1.6 - TS returned a correct error for a case <Named name={'Test'} /> saying that name property is forbidden here.