Question

我正在尝试使用React-redux连接打字稿。我对connect与withRouter的使用感到困惑。

我正在尝试使用它，

withRouter<any>(connect<{},ComponentProps,{}>(
    matchStateToProps, 
    matchDispatchToProps
)(Component));

尝试传递属性productList时会抛出，

TS2339：属性'productList'在类型上不存在 '内在属性＆amp; IntrinsicClassAttributes，ComponentState＆gt;＆gt; ＆安培; REA ...

但在另一个组成部分，

withRouter<any>(connect<{}, ComponentProps, {}>(
    mapStateToProps, 
    mapDispatchToProps
)(Component));

工作得不错。 ComponentProps包含组件的所有属性。（包括stateProps，dispatchProps，RouteProps和自己的道具。

如何使用react connect在打字稿中使用withRouter？我应该传递什么作为withRouter＆amp;的道具？ connect？

Answer 1

我是这样做的：

import { compose } from 'redux';

然后：

export default compose<React.ComponentClass>(
  withRouter,
  connect<IMapStateToProps, IMapDispatchToProps, IConnectedRouterProps>(
    mapStateToProps,
    {
      fetchComponentData
    },
  ),
)(Component);

Answer 2

遇到一些麻烦后，我能够使它正常工作！

// assuming all these interfaces are well defined somewhere.
type MyComponentProps = OwnProps & ComposeProps & StateProps & DispatchProps;

// the secret sauce, need to define a class constructor to pass to compose
interface MyComponentClass<MyComponentProps> extends React.ComponentClass {
  new (props: MyComponentProps): React.Component<MyComponentProps>;
}

export class MyComponent extends React.Component<MyComponentProps> {
  ...
}

export default compose<MyComponentClass<MyComponentProps>>(
  withSomeHOC(),
  connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)
)(MyComponent);

以上内容可让您导入组成的组件并保持类型安全！

使用react-redux连接typescript

2 个答案: