Type Router의`strictFunctionTypes`를 React Router와 Redux로 조정하는 방법은 무엇입니까?

Question

TypeScript 2.6 introduced strictFunctionTypes 그리고 업그레이드 후, Redux와 React Router가 서로 잘 어울리는 것처럼 보이지 않습니다. 따라서 특정 경로에 표시되는 구성 요소의 유형을 정의하고 Redux에서 소품을 수신하는 것이 가장 좋은 방법인지 궁금합니다.

다음은 내 애플리케이션을 설정 한 방법에 대한 것입니다.

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

그럼 난 표시 할 구성 요소가 돌아 오는 모두에서 소품을 수신하고 나는 다음과 같은 유형의 서명에 포착하려고했습니다 라우터, 반작용 :이 같은 경로가있다

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

돌아 오는 소품은 다음과 같은 정의

... : 다음과 같은 다소

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

... 라우터 소품 :

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

불행히도와 (RouteComponentProps가 react-router-dom 직수입 임)는 다음과 같이

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

(상기 첫번째 코드 샘플 Route 통해) 라우터에 전달되는 구성이 만들어 strictFunctionTypes 인 경우 ConnectedComponent을 유형 라우터 유형에 할당 할 수 없다고 TypeScript가 알립니다.

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

그래서 위의 유형을 정의하는 방식은 형식을 사용하는 방법과 일치하지 않습니다. s를 사용하지 않고 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); 

'void'는 노출하려는 소품으로 바꿉니다.

그 중 95 %가 될 수 있습니다. 지금 VPN 확인을 두 번 할 필요가 없습니다. 그리고 나는 엿 같은 포맷에 대해 유감스럽게 생각한다. 나에게 무슨 일이 일어나는지 확인할 수있게되면 업데이트 할 것이다!