I have a HOC in my react application here is the code.
export function checkToken<Props>(WrappedComponent: new() => React.Component<Props, {}>) {
return (
class PrivateComponent extends React.Component<Props, LocalState> {
constructor() {
super();
this.state = {
isAuthed: false
}
}
async componentDidMount() {
let token = localStorage.getItem('dash-token');
let config = {
headers: { 'x-access-token': token }
}
let response = await axios.get(`${url}/users/auth/checkToken`, config)
if (!response.data.success) {
localStorage.removeItem('dash-token');
browserHistory.push('/login');
} else {
this.setState({isAuthed: true});
}
}
render() {
let renderThis;
if (this.state.isAuthed) {
renderThis = <WrappedComponent {...this.props} />
}
return (
<div>
{renderThis}
</div>
)
}
}
)
}
When running this app I get the following error.
error TS2698: Spread types may only be created from object types.
It would seem that there is an issue with my spread syntax when I am passing down the props {...this.props}.
This is where I am using this HOC.
const app = document.getElementById('root') as HTMLElement;
ReactDOM.render(
<Router history={browserHistory}>
<Route path={'/'} component={App}>
<IndexRoute component={checkToken(ListPage)} />
<Route path={'/terms-page/:id'} component={checkToken(TermsPage)} />
<Route path={'/default-settings'} component={checkToken(DefaultSettings)} />
<Route path={'/login'} component={LoginPage} />
<Route path={'/logout'} component={Logout} />
</Route>
</Router>
,app);
Also to be clear this is a compile time error.
Where am I going wrong?