将 Typescript 与 React-Redux 一起使用时出现类型错误 [英] Type Error when using Typescript with React-Redux

问题描述

我正在尝试将 react-redux 与 typescript 结合使用，当我尝试使用 connect() 和 mapStateToProps 注入道具时出现类型错误.

I am trying to use react-redux with typescript and I'm getting a type error when I try to inject props using connect() and mapStateToProps.

我的组件如下所示:

function mapStateToProps(state) {
    return {
        counter: state.counter
    };
}

function mapDispatchToProps(dispatch) {
    return {
        incr: () => {
            dispatch({type: 'INCR', by: 2});
        },
        decr: () => {
            dispatch({type: 'INCR', by: -1});
        }
    };
}




export default class Counter extends React.Component<HelloProps, any> {
    render() {
        return (
          <div>
              <p>
                  <label>Counter: </label>
                  <b>#{this.props.counter}</b>
              </p>
              <button onClick={e => this.props.incr() }>INCREMENT</button>
              <span style={{ padding: "0 5px" }}/>
              <button onClick={e => this.props.decr() }>DECREMENT</button>
        );
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Counter);

这家店长这样

let store = createStore(
    (state:HelloState, action:HelloAction) => {
        switch (action.type) {
            case 'INCR':
                return {counter: state.counter + action.by};
            default:
                return state;
        }
    },

最后，我将我的类型定义为:

Finally, I have defined my types to be:

interface HelloProps {
    counter?: number;
    incr?: () => any;
    decr?: () => any;
}

interface HelloState { 
    counter:number;
}

interface HelloAction { 
    type:string, 
    by:number;
}

当我尝试编译代码时，出现以下错误:

When I try and compile the code I get the following error:

(39,61): error TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentClass<{ counter: any; } & { incr: () => void; decr: () => void; }> | StatelessComponent<...'.
  Type 'typeof Counter' is not assignable to type 'StatelessComponent<{ counter: any; } & { incr: () => void; decr: () => void; }>'.
    Type 'typeof Counter' provides no match for the signature '(props?: { counter: any; } & { incr: () => void; decr: () => void; }, context?: any): ReactElement<any>' 

有趣的是，即使抛出类型错误，代码仍然有效.此外，将组件的 prop 接口更改为 any 也可以解决该问题.类型系统似乎不明白这两个对象是由两个映射函数合并的.

Interestingly the code still works even though it throws the type error. Also, changing the component's prop interface to any also solves the issue. It seems like the type system doesn't understand that the two objects are merged by the two mapped functions.

推荐答案

我在这个 Github 上倒数第二个帖子中找到了答案 问题.mapStateToProps 和/或 mapDispatchToProps 或 connect 上没有类型参数，它将产生两个地图函数的返回类型的交集.

I found the answer in the second to last post on this Github issue. Without the type parameter on both the mapStateToProps and/or mapDispatchToProps or on connect it will produce an intersection of the return types of the two map functions.

这篇关于将 Typescript 与 React-Redux 一起使用时出现类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！