Change in generic behaviors since 3.1.6 and 3.2.0-rc

[janhartmann]

TypeScript Version: 3.2.0-rc

Search Terms: react hoc 3.2.0-rc not assignable to

Code

import * as React from "react";

export interface IAnalyticsContext {
  logEvent(eventName: string, details: object): void;
}

const context = React.createContext<IAnalyticsContext | null>(null);
export const AnalyticsContextProvider = context.Provider; // easy import
export const AnalyticsContextConsumer = context.Consumer; // easy import

type Omit<Value, Key extends keyof Value> = Pick<
  Value,
  Exclude<keyof Value, Key>
>;

export default function withAnalytics<
  Props extends {
    analyticsContext?: IAnalyticsContext;
  },
  ComponentProps = Omit<Props, "analyticsContext">
>(
  Component: React.ComponentClass<Props> | React.SFC<Props>
): React.SFC<ComponentProps> {
  return function AnalyticsContextBoundComponent(props: ComponentProps) {
    return (
      <AnalyticsContextConsumer>
        {value => <Component {...props} analyticsContext={value} />} // <-- Error is on the <Component ... />
      </AnalyticsContextConsumer>
    );
  };
}

Expected behavior:
This way of creating HOC worked without any problems in TypeScript 3.1.6, but I noticed the error in VSCode TypeScript version (3.2.0-rc), so I am wondering what is changed since this is now not a working example anymore.

Actual behavior:

[ts]
Type 'ComponentProps & { analyticsContext: IAnalyticsContext; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Type 'ComponentProps & { analyticsContext: IAnalyticsContext; }' is not assignable to type 'Props'.
[2322]

Possible related issues:
#27895

[Jessidhia]

Something looks weird. Why does the error message not include the possible | null you are passing to analyticsContext? You haven't proved or asserted it's not null yet, while it is one of the possible values of value.

[weswigham]

ComponentProps needs to be constrained to Props in some way - this only typechecked before because we had a bug in JSX that occasionally erased type parameters before checking signature validity. You take in a ComponentProps, but pass them to a component which expect a Props instead.

[janhartmann]

It can be resolved like so:

export interface IAnalyticsProps {
  analyticsContext?: IAnalyticsContext;
}

export default function withAnalytics<
  Props extends IAnalyticsProps,
  ComponentProps = Omit<Props, "analyticsContext">
>(
  Component: React.ComponentClass<Props> | React.SFC<Props>
): React.SFC<ComponentProps> {
  return function AnalyticsContextBoundComponent(
    props: Props & ComponentProps
  ) {
    return (
      <AnalyticsContextConsumer>
        {value => <Component {...props} analyticsContext={value} />}
      </AnalyticsContextConsumer>
    );
  };
}

[luixo]

I just stumbled upon the same issue.

It can be resolved like so

Thanks for the workaround!

ComponentProps needs to be constrained to Props in some way

If I will not define ComponentProps as second generic argument, but inline the Omit<Props, 'analyticsContext'>, I will still get the error:

export default function withAnalytics<
  Props extends {
    analyticsContext?: IAnalyticsContext;
  }
>(
  Component: React.ComponentClass<Props> | React.SFC<Props>
): React.SFC<Omit<Props, "analyticsContext">> {
  return function AnalyticsContextBoundComponent(props: Omit<Props, "analyticsContext">) {
    return (
      <AnalyticsContextConsumer>
        {value => <Component {...props} analyticsContext={value} />}
      </AnalyticsContextConsumer>
    );
  };
}

The error is basically the same:

TS2322: Type '{ analyticsContext: IAnalyticsContext | null; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'analyticsContext' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.