I recently updated all react libraries to the latest and all of its typings. I am facing an issue with typescript compilation. It is saying
[ts] Type '{ history: History<any>; location: Location<any>; match: match<any>; staticContext?: StaticContext; }' is not assignable to type 'LibraryManagedAttributes<T["component"], Readonly<{ children?: ReactNode; }> & Readonly<{ history: History<any>; location: Location<any>; match: match<any>; staticContext?: StaticContext; }>>'. [2322]
type PrivateRouteProps = UserAuthStore.UserAuthState &
typeof UserAuthStore.actionCreators &
RouteProps &
{ component: typeof React.Component };
class PrivateRoute<T extends PrivateRouteProps = PrivateRouteProps> extends React.Component<T, {}> {
render() {
let auth = new Auth();
const {
isAuthenticated,
component: Component,
...props
} = this.props
if (!isAuthenticated) {
console.log(this.props)
window.location.href = auth.getAuthorizeUrl(this.props.location!.pathname!)
}
return (
<Route
{...props}
render={props => isAuthenticated ? <Component {...props} />: (<div>Redirecting...</div>)}
/>
)
}
}
I am getting error at <Component {...props} />
on "Component".
I removed Component from destruction and casted type like this
const Component = this.props.component as React.ComponentType<{} & RouteComponentProps<{}>>;
This worked for me. I read it from here. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355#issuecomment-310544041