Typescript bug with withGlobal
Closed this issue · 2 comments
Hi,
Fantastic package!
I just migrated my package to TS but the following code gives Typescript error in the withGlobal expression:
import React, {withGlobal} from 'reactn';
export interface State {
num: number;
}
const App: React.FC<{oneProp: string, num: number}> = (props) => {
return (
<div className="App">
{props.num}
</div>
);
}
const mapStateToProps = (global: State) => {
return { num: global.num };
};
export default withGlobal(mapStateToProps)(App);
Error:
Argument of type 'FunctionComponent<{ oneProp: string; num: number; }>' is not assignable to parameter of type 'LowerOrderComponent<{ num: number; }>'. Type 'FunctionComponent<{ oneProp: string; num: number; }>' is not assignable to type 'FunctionComponent<{ num: number; }>'. Types of parameters 'props' and 'props' are incompatible. Type 'PropsWithChildren<{ num: number; }>' is not assignable to type 'PropsWithChildren<{ oneProp: string; num: number; }>'. Property 'oneProp' is missing in type 'PropsWithChildren<{ num: number; }>' but required in type '{ oneProp: string; num: number; }'.ts(2345)
I might easily be missing something, or it is a bug.
Please look at it if you can.
Best: Peter
It looks like you're trying to use the component without the oneProp
property. Either remove that or make it optional: React.FC<{oneProp?: string, num: number}>
. Judging by the name of the component you're probably not passing that property into ReactDOM.render(<App />)
.
Here's a better way to structure this:
import React, {withGlobal} from 'reactn';
export interface State {
num: number;
}
interface AppProps {
oneProp?: string;
}
const App: React.FC<AppProps & State> = (props) => {
return (
<div className="App">
{props.num}
</div>
);
}
const mapStateToProps = (global: State) => {
return { num: global.num };
};
export default withGlobal(mapStateToProps)(App);
Also this is not a bug and I'm assuming this issue will be closed, please use StackOverflow or some other form of community to get help with TypeScript and ReactN usage.
Thank you for the help. It was not a bug.