In my attempt to create a Higher Order Component, I am working on injecting a function from the current context into a prop in the wrapped component while still maintaining the interfaces of Props.
Here is how I wrap it:
interface Props extends AsyncRequestHandlerProps {
bla: string;
}
class MyComponent extends React.Component<Props> {
// ....
}
export default withAsyncRequestHandler(MyComponent)
This is how I have defined the withAsyncRequestHandler:
export interface AsyncRequestHandlerProps {
asyncRequestHandler: <T>(promise: Promise<T>) => Promise<T | null>;
}
type PropsWithoutInjectedHandler<P> = Omit<P, keyof AsyncRequestHandlerProps>;
export function withAsyncRequestHandler<P>(Component: React.ComponentType<P>) {
return class ComponentWithAsyncRequestHandler extends React.Component<
PropsWithoutInjectedHandler<P>
> {
static contextType = AsyncHandlerContext;
context!: AsyncHandlerContext | null;
render = () => {
const asyncRequestHandler: <T>(
promise: Promise<T>
) => Promise<T | null> = (promise) => {
if (this.context === null) {
throw new Error(
"withAsyncRequestHandler should only wrap components that are mounted inside <AsyncHandler />."
);
}
return AsyncRequest(promise, this.context);
};
const { ...props } = this.props;
return (
<Component
{...props}
asyncRequestHandler={asyncRequestHandler}
></Component>
);
};
};
}
The initial signature of MyComponent includes both the bla prop and the asyncRequestHandler props. My goal is for the wrapper HOC to return a component signature with just the bla prop after injecting the asyncRequestHandler.
Externally, the interface of this HOC appears to work fine as I can still access the remaining props from TypeScript when mounting the wrapped components.
However, internally within the HOC, I encounter an error:
When I mount the <Component> in render(), my current code generates this error:
Type 'Readonly<Pick<P, Exclude<keyof P, "asyncRequestHandler">>> & { asyncRequestHandler: <T>(promise: Promise<T>) => Promise<T | null>; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
Type 'Readonly<Pick<P, Exclude<keyof P, "asyncRequestHandler">>> & { asyncRequestHandler: <T>(promise: Promise<T>) => Promise<T | null>; children?: ReactNode; }' is not assignable to type 'P'.
'P' could be instantiated with an arbitrary type which could be unrelated to 'Readonly<Pick<P, Exclude<keyof P, "asyncRequestHandler">>> & { asyncRequestHandler: <T>(promise: Promise<T>) => Promise<T | null>; children?: ReactNode; }'.ts(2322)
I suspect the issue lies around the construction of
Omit<P, keyof AsyncRequestHandlerProps>