HOC typing example seems to be no longer valid as of [email protected]+

[infctr]

[email protected]
@types/[email protected]

The code from the Advanced section

Type '{ prop: string; } & Readonly<{ children?: ReactNode; }> & Readonly<Pick<T, Exclude<keyof T, "prop">>>' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
  Type '{ prop: string; } & Readonly<{ children?: ReactNode; }> & Readonly<Pick<T, Exclude<keyof T, "prop">>>' is not assignable to type 'T'.ts(2322)

import React from 'react'

type WithThemeProps = {
  prop: string;
}

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

export function withTheme<T extends WithThemeProps = WithThemeProps>(WrappedComponent: React.ComponentType<T>) {
  // Try to create a nice displayName for React Dev Tools.
  const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

  // Creating the inner component. The calculated Props type here is the where the magic happens.
  return class ComponentWithTheme extends React.Component<Optionalize<T, WithThemeProps>> {
    public static displayName = `withPages(${displayName})`;

    public render() {
      // this.props comes afterwards so the can override the default ones.
      return <WrappedComponent prop="prop" {...this.props} />;
    }
  }
}

[ferdaber]

Yeah this is a bug in the compiler after some changes in 3.2. I'll see if I can find the issue in the TS repo.

[ferdaber]

Workaround is to do {...this.props as T}

[infctr]

@ferdaber thnx, I got really puzzled after ts update

[eps1lon]

Looks like microsoft/TypeScript#28938 with workaround described in microsoft/TypeScript#28938 (comment)

[ferdaber]

That's the one!

[swyxio]

anything we can do to fix in the meantime? maybe add a link?

[adamborowski]

Workaround is to do {...this.props as T}

@ferdaber do you have any docs explaining why?