如何将TypeScript的`strictFunctionTypes`与React Router和Redux协调一致？

Question

如何将TypeScript的`strictFunctionTypes`与React Router和Redux协调一致？

typescriptreduxreact-routerreact-router-reduxdefinitelytyped

5

TypeScript 2.6 引入了 strictFunctionTypes。在升级后，我似乎无法让Redux和React Router正常工作并互相配合。因此，我想知道如何最好地定义一个组件的类型，该组件既要显示在某个路由上，又要从Redux接收props。

下面是我如何设置我的应用程序。有这样一个路由：

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

然后，我希望显示的组件从Redux和React Router接收props，以下是我尝试捕获的类型签名：

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

在这里，Redux的属性定义类似于以下内容：

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

...并且路由器属性大致如下：

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

那么，我上面定义类型的方式有什么不符合类型使用方式的地方吗？有没有办法在不使用 any 的情况下启用 strictFunctionTypes？

- Vincent

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mizx · Answer 1

尝试使用react-router-dom的withRouter高阶组件函数，除了您已经在使用的connect之外。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

提示：使用recompose使事情保持整洁（我发现这也有助于解决严格的typescript头痛问题）。

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访问以进行双重检查。我正在使用手机，对于糟糕的格式化表示抱歉。一旦我可以检查对我有用的内容，我会进行更新！