タイプ・スクリプトの `strictFunctionTypes`をReact RouterとReduxで照合する方法は？

Question

TypeScript 2.6 introduced strictFunctionTypesアップグレード後、私はReduxとReact Routerがうまくやってくれないようです。したがって、特定のルートに表示されるコンポーネントと、Reduxからのプロップを受け取るコンポーネントの両方のタイプを最適に定義する方法が不思議です。

以下は、私のアプリケーションの設定方法です。

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

その後、私は表示させたいコンポーネントはReduxの両方から小道具を受け取り、私は次の型シグネチャで捕獲しようとしたルータを、リアクト：このようなルートがあります

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

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

...とやや次のようにルータの小道具：

Reduxの小道具は、次のように定義されています

...

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

あいにくと、（RouteComponentPropsはreact-router-domからインポートされた場合）次のように

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

（上記の最初のサンプルコードでRouteを介して）ルータに渡されるコンポーネントが作成されstrictFunctionTypes、タイプルータは、ConnectedComponentがReact Routerが予想しているタイプに割り当てられないと不平を言っています：

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...'. 

上記の型を定義する方法は、型の使用方法に沿っていませんか？ anyの使用に頼らずにstrictFunctionTypesを有効にする手段はありますか？

Answer 1

既に使用しているconnectに加えて、react-router-domのwithRouter HOC機能を使用してみてください。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

ヒント：整理しておくと（私が見つけた厳しいタイプスクリプトの頭痛にも役立ちます）、recomposeを使用してください。

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

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

「空白」は、公開したい小道具に置き換えてください。

それはその95％かもしれません。現時点では二重チェックのVPNアクセス権はありません。そして私は私の電話の上にいるので、すごいフォーマットのために申し訳ありません。私は何が私のために働いているかを確認することができたら更新します！