reactjs - 如何使用 Typescript 将调度操作注入(inject) Prop ？

Question

我正在尝试使用 create-react-app-typescript
创建一个简单的项目我想设置的第一件事是 redux。所以我一切正常，但现在我遇到了无法解决的问题:

// src/App.tsx
interface AppProps {
  simpleAction: () => void;
}

class App extends React.Component<AppProps, {}> {
   ...
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  simpleAction: () => dispatch(simpleAction())
});

一切看起来都很好，但是当我这样调用 App 时

// index.tsx
ReactDOM.render(
    <Provider store={configureStore()}>
        <App />
    </Provider>,
    document.getElementById('root')
);

我明白了

[ts]  
Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<AppProps, "simpleAction">, ComponentSta...'.
  Type '{}' is not assignable to type 'Readonly<Pick<AppProps, "simpleAction">>'.
    Property 'simpleAction' is missing in type '{}'.

所以 ts 期望 Action 通过 props 传递，尽管它是在 connect 中注入(inject)的。有什么想法吗？

Answer 1

解决方案非常简单:

interface IMapStateToProps {}

interface IMapDispatchToProps {
  simpleAction: () => void;
}

type AppProps = IMapStateToProps & IMapDispatchToProps;

class App extends React.Component<AppProps, {}> {
...
}
...
...
...

export default connect<IMapStateToProps, IMapDispatchToProps, {}>(mapStateToProps, mapDispatchToProps)(App);