将Typescript与React-Redux一起使用时出现类型错误

喔喔

我试图将React-redux与Typescript一起使用,当我尝试使用connect()和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;
        }
    },

最后,我将类型定义为:

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

interface HelloState { 
    counter:number;
}

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

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

(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也可以解决该问题。似乎类型系统无法理解这两个映射功能将两个对象合并在一起。

喔喔

我在有关Github问题的倒数第二篇文章中找到了答案如果mapStateToPropsand和/或mapDispatchToPropsor上都没有type参数,connect则会产生两个map函数的返回类型的交集。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将Redux-Form与React-Redux Connect一起使用时出现TypeScript错误

将撇号与 materialize 一起使用时出现类型错误

当我将 IterativeImputer 与 KNeighborsClassifier 一起使用时出现错误“未知标签类型:‘连续’”

当将Redux Saga与React一起使用时,出现此错误..未捕获的TypeError:getPosts不是函数

将pynput与pyinstaller一起使用时出现错误

在将dropdownButton与selectedItemBuilder和hint一起使用时,为什么在Flutter中出现类型错误?

将流和收集器与Maps的ArrayList一起使用时出现不兼容的类型错误

在将react-redux与ASP.NET Core一起使用时在运行时出现未定义的错误

将EclEmma(eclipse插件)与JMockit一起使用时出现错误(仅与Delegate()一起使用)

获取props.dispatch()的类型定义,以将TypeScript与React-Redux一起使用

将Wasm捆绑在一起后,为什么会出现错误“响应具有不受支持的MIME类型”,但在与webpack开发服务器一起使用时却不会出现错误?

将排序与 seq::index::sample 一起使用时出现 Rust 错误

将cx_freeze与pythoncom一起使用时出现导入错误

将 Sphinx 与 Django 一起使用时出现 Autodoc 错误

将拆分与数据帧一起使用时出现未找到的错误

将模糊搜索与猫鼬一起使用时出现打字稿错误

将SQL Server与MySQL一起使用时出现“不支持选项”错误

解决将OnModelCreating与ApplicationDbContext一起使用时出现的“未定义键”错误?

将Scanner与Double一起使用时出现Java错误

将std :: invoke_result_t与通用lambda一起使用时出现硬错误

当将`track by $ index`与过滤器一起使用时,出现错误。怎么解决呢?

将 HttpServlet 与 JAVA 一起使用时出现关闭错误

将Pandoc与Markdown一起使用时出现紧缩列表错误

将 pyyaml 与 FastAPI 一起使用时出现 CORS 错误

将SQL与INSERT INTO一起使用时出现错误1064 ... SELECT ...重复键更新

将HWIOAuthBundle与FOSUserBundle一起使用时出现“找不到用户名”错误

将Android Studio与AndEngineTMXTileExtension一起使用时出现TMXLoader错误

将 QueryBuilder 与表达式一起使用时出现语义错误

将语法与SpeechRecognition包一起使用时出现运行时错误