Repository navigation
Type parameter on higher-order-component doesn't seem to work #28720
Description
TypeScript Version: 3.2.0-rc, 9319ea4
Search Terms:
higher order component, React, type parameter
Code
import * as React from 'react';
export interface ComponentProps {
foo: number;
}
export default <P extends ComponentProps>(WrappedComponent: React.ComponentType<P>) => {
return class SomeHOC extends React.Component<P, {}> {
render() {
return <WrappedComponent foo={0} />;
}
};
}Expected behavior:
No error (as in 3.1.6)
Actual behavior:
src/wrappedComponent.tsx:10:21 - error TS2322: Type '{ foo: number; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
Property 'foo' does not exist on type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
10 return <WrappedComponent foo={0} />;
Playground Link:
Activity
weswigham commentedon Nov 29, 2018
We corrected & tightened up our checking of generics in jsx - we had a nasty habit of erasing them before.
You're declaring that your
WrappedComponenttakes aP extends ComponentProps, but are only providing aComponentPropsto theWrappedComponentwhen its type states that you must provide aP. Usually you'd do this by spreading the input props toSomeHOCinto yourWrappedComponenttag.MLoughry commentedon Nov 29, 2018
Got it. The actual (non-example) code was using some cached props in the state, of type
ComponentProps. By making the state itself similarly generic, it works.