Correct Typescript type for return value of nested prop-injection-HOCs in React

The first problem is that the component classes in the HOCs are defined incorrectly, as you'll see if you enable the strictFunctionTypes compiler option. The props coming from the outside to WithAuthentication do not include isAuthenticated; WithAuthentication generates that prop itself. So the props type of WithAuthentication should exclude IWithAuthenticationProps:

// ...
class WithAuthentication extends React.Component<Pick<P, Exclude<keyof P, keyof IWithAuthenticationProps>>> {
    public render() {
        const originalProps = this.props;
        // ...
    }
}
// ...

And similarly for WithRestApi (and remove the type assertion):

// ...
withAuthentication(class WithRestApi extends React.Component<Pick<P, Exclude<keyof P, keyof IWithRestApiProps>> & IWithAuthenticationProps> {
    public render() {
        const originalProps = this.props;
        // ...
    }
    // ...
}
// ...

Now you are in a world of hurt because TypeScript is unable to simplify complex combinations of Pick and Exclude types in WithRestApi.tsx. The error (pretty printed by me) is:

Type 'ComponentType<
  Pick<
    Pick<P, Exclude<keyof P, "getResultOfApiCall" | "isAuthenticated">>
      & IWithAuthenticationProps,
    Exclude<Exclude<keyof P, "getResultOfApiCall" | "isAuthenticated">, "isAuthenticated">
  >
>'
is not assignable to type
'ComponentType<Pick<P, Exclude<keyof P, "getResultOfApiCall" | "isAuthenticated">>>'.

We can look at this error message and realize that the two types will be equivalent for any choice of P, but TypeScript doesn't have the necessary algebraic rules to prove this.

So I would suggest a different approach. For each HOC, instead of declaring a type variable for the inner props type and defining the outer props type by excluding things, declare a type variable for the outer props type and define the inner props type as an intersection. TypeScript is much better at simplifying and performing inference involving intersections. The drawback is that the props type of MyComponent has to be written as an intersection of the matching form instead of just an interface. You can define type aliases to generate the necessary intersections. The solution:

WithAuthentication.tsx

import * as React from 'react';

// The `{[withAuthenticationPropsMarker]?: undefined}` constituent ensures that
// `WithAuthenticationProps<{}>` is still an intersection so that the inference
// rule that throws out matching constituents between
// `WithAuthenticationProps<{}>` and `WithAuthenticationProps<OrigProps>` still
// works.  In case that rule isn't applicable, the checker tags each union or
// intersection type with the first type alias reference it sees that produces
// the union or intersection type, and there's an inference rule that matches up
// the type arguments of union or intersection types produced by instantiating
// the same type alias.  Normally this is fragile because it depends on the
// desired type alias being the first one seen in the compilation, but our use
// of a unique marker should ensure that nothing else can produce and tag the
// intersection type before we do.
const withAuthenticationPropsMarker = Symbol();
export type WithAuthenticationProps<OrigProps> = OrigProps &
    {[withAuthenticationPropsMarker]?: undefined} & {
    isAuthenticated: () => boolean;
};

export const withAuthentication = <P extends {}>(Component: React.ComponentType<WithAuthenticationProps<P>>):
    React.ComponentType<P> =>
    class WithAuthentication extends React.Component<P> {
        public render() {
            return (
                <Component
                    {...this.props}
                    isAuthenticated={this.isAuthenticated}
                />
            );
        }

        private readonly isAuthenticated = (): boolean => {
            return true;
        }
    }

WithRestApi.tsx

import * as React from 'react';

import { WithAuthenticationProps, withAuthentication } from './WithAuthentication';

const withRestApiPropsMarker = Symbol();
export type WithRestApiProps<OrigProps> = OrigProps &
    {[withRestApiPropsMarker]?: undefined} & {
    getResultOfApiCall: () => string;
}

export const withRestApi = <P extends {}>(Component: React.ComponentType<WithRestApiProps<P>>):
    React.ComponentType<P> =>
    withAuthentication(class WithRestApi extends React.Component<WithAuthenticationProps<P>> {
        public render() {
            // @ts-ignore : "Rest types may only be created from object types"
            // https://github.com/Microsoft/TypeScript/issues/10727
            let {isAuthenticated, ...otherPropsUntyped} = this.props;
            let otherProps: P = otherPropsUntyped;

            return (
                <Component
                    {...otherProps}
                    getResultOfApiCall={this.getApiData}
                />
            );
        }

        private readonly getApiData = () => {
            if (this.props.isAuthenticated()) {
                return 'Some API result';
            } else {
                return 'Not authenticated';
            }
        }
    });

MyComponent.tsx

import * as React from 'react';

import { WithRestApiProps, withRestApi } from './WithRestApi';

type MyComponentProps = WithRestApiProps<{
    componentProp: string;
}>;

class MyComponent extends React.Component<MyComponentProps> {
    public render() {
        return (
            <>
                <h2>Component prop: {this.props.componentProp}</h2>
                <h2>API result: {this.props.getResultOfApiCall()}</h2>
            </>
        );
    }
}

export default withRestApi(MyComponent);

Follow-up: hiding isAuthenticated from the withRestApi wrapped component

Hiding the prop in the typings is a matter of changing the definition of WithRestApiProps to:

export type WithRestApiProps<OrigProps> = OrigProps & {
    getResultOfApiCall: () => string;
}

The prop will still be passed at runtime. If you want to avoid that, you could change WithRestApi.render to:

    public render() {
        // @ts-ignore : "Rest types may only be created from object types"
        // https://github.com/Microsoft/TypeScript/issues/10727
        let {isAuthenticated, ...otherPropsUntyped} = this.props;
        let otherProps: P = otherPropsUntyped;

        return (
            <Component
                {...otherProps}
                getResultOfApiCall={this.getApiData}
            />
        );
    }