typescript 2.6 introduced strictFunctionTypes
,并且在升级之后,我似乎无法让 Redux 和 React Router 相互配合。因此,我想知道如何最好地定义既要显示在特定路由上又要从 Redux 接收 Prop 的组件的类型。
以下是关于我如何设置我的应用程序的。有这样一条路线:
<Route path="/some/path/with/:parameter" component={ConnectedComponent}/>
然后我想要显示的组件从 Redux 和 React Router 接收 Prop ,我试图在以下类型签名中捕获这些 Prop :
class BareComponent extends React.Component<ReduxProps & RouteProps, ArbitraryState>
...其中 Redux props 的定义类似于以下内容:
interface StateProps { storeProperty: string; }
interface DispatchProps { dispatchCallback: () => void; }
type ReduxProps = StateProps & DispatchProps;
...路由器 Prop 有点像下面这样:
interface RouteParams { parameter: string }
type RouteProps = RouteComponentProps<RouteParams>;
(其中 RouteComponentProps
是从 react-router-dom
导入的)
传递给路由器的组件(通过上面第一个代码示例中的 Route
)创建如下:
const ConnectedComponent = connect<StateProps, DispatchProps, RouteProps, ArbitraryStateInterface>(mapStateToProps)(BareComponent);
不幸的是,对于 strictFunctionTypes
,这会导致 TypeScript 提示 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...'.
那么,我定义上述类型的方式与这些类型的使用方式有何不符?有没有办法让我启用 strictFunctionTypes
而无需使用 any
?
最佳答案
尝试使用 react-router-dom
的 withRouter
HOC 函数以及您已经在使用的 connect
。
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”替换为您想要公开的任何 Prop 。
这可能是其中的 95%。目前没有 VPN 访问权限来仔细检查。我正在打电话,很抱歉格式很糟糕。一旦我可以检查哪些对我有用,我就会更新!
关于typescript - 如何协调 TypeScript 的 `strictFunctionTypes` 与 React Router 和 Redux?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48044558/