Wie kann man TypeScript `strictFunctionTypes` mit React Router und Redux abgleichen?

Question

TypeScript 2.6 introduced strictFunctionTypes, und nach dem Upgrade, ich kann nicht scheinen, Redux und React Router zu bekommen, nett mit ihm und einander zu spielen. Daher frage ich mich, wie man die Typen für eine Komponente, die auf einer bestimmten Route angezeigt werden soll, am besten definieren und Requisiten von Redux erhalten kann.

Im Folgenden erfahren Sie, wie ich meine Anwendung eingerichtet habe. Es gibt eine Route wie folgt aus:

<Route path="/some/path/with/:parameter" component={ConnectedComponent}/> 

Dann wird die Komponente, die ich angezeigt werden soll empfängt Requisiten von beiden Redux und Reagieren Router, die ich versucht habe, in der folgenden Art Signatur zu erfassen:

class BareComponent extends React.Component<ReduxProps & RouteProps, ArbitraryState> 

... wo die Redux Requisiten ähnlich wie folgt definiert sind:

interface StateProps { storeProperty: string; } 
interface DispatchProps { dispatchCallback:() => void; } 
type ReduxProps = StateProps & DispatchProps; 

... und der Router Requisiten etwas wie folgt aus:

interface RouteParams { parameter: string } 
type RouteProps = RouteComponentProps<RouteParams>; 

(wobei RouteComponentProps aus react-router-dom importiert)

Die Komponente, die an den Router übergeben wird (via Route in dem ersten Code-Beispiel oben) erstellt wird, wie folgt:

const ConnectedComponent = connect<StateProps, DispatchProps, RouteProps, ArbitraryStateInterface>(mapStateToProps)(BareComponent); 

Leider mit strictFunctionTypes, dies führt TypeScript zu beschweren, dass ConnectedComponent nicht dem Typ React Router zugeordnet werden kann:

TS2322: Type '{ path: "/some/path/with/:parameter"; component: ComponentClass<Pick<StatePr...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'. 
Type '{ path: "/some/path/with/:parameter"; component: ComponentClass<Pick<StatePr...' is not assignable to type 'Readonly<RouteProps>'. 
    Types of property 'component' are incompatible. 
    Type 'ComponentClass<Pick<StateProps & DispatchProps & RouteC...' is not assignable to type 'StatelessComponent<RouteComponentProps<any> | undefined> | ComponentClass<RouteComponentProps<any...'. 
     Type 'ComponentClass<Pick<StateProps & DispatchProps & RouteC...' is not assignable to type 'ComponentClass<RouteComponentProps<any> | undefined>'. 
     Types of parameters 'props' and 'props' are incompatible. 
      Type 'RouteComponentProps<any> | undefined' is not assignable to type 'Pick<StateProps & DispatchProps & RouteComponentProps<R...'. 
      Type 'undefined' is not assignable to type 'Pick<StateProps & DispatchProps & RouteComponentProps<R...'. 
       Type 'undefined' is not assignable to type 'Pick<StateProps & DispatchProps & RouteComponentProps<R...'. 

Also, was in der Art, wie ich die oben genannten Typen definiere, stimmt nicht mit der Art überein, wie die Typen verwendet werden sollen? Gibt es eine Möglichkeit für mich, strictFunctionTypes zu aktivieren, ohne auf die Verwendung von any s zurückgreifen zu müssen?

Answer 1

Versuchen Sie react-router-dom 's withRouter HOC-Funktion zusätzlich zu dem connect Sie bereits verwenden. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

Tipp: Verwenden Sie recompose, um die Dinge sauber zu halten (und hilft auch mit strengen Typoskript Kopfschmerzen, die ich gefunden habe).

import { withRouter } from 'react-router-dom'; 
import { compose } from 'recompose'; 
... 

... 
export const ConnectedComponent = compose<ReduxProps & RouteProps, void>(
    connect(mapStateToProps, mapDispatchToProps), 
    withRouter 
)(BareComponent); 

Ersetzen Sie "void" mit irgendwelchen Requisiten, die Sie ausgesetzt werden möchten.

Das könnte 95% davon sein. Haben Sie keinen VPN-Zugang, um im Moment zu überprüfen. Und ich bin auf meinem Telefon so leid für die beschissene Formatierung. Ich werde aktualisieren, sobald ich überprüfen kann, was für mich gearbeitet hat!