无法使用打字稿

时间:2019-10-07 15:01:49

标签: reactjs typescript redux

一切都很好吗?

我对理解问题感到困惑,将带类型的文本与react结合使用,在使用组件进行连接或redux时会出现此错误,无法理解,请进行一些研究,但答案相当混乱

对此错误:

Argument of type 'typeof Beds' is not assignable to parameter of type 'ComponentType<Matching<{ beds: DataBedsTypes[]; } & typeof import("/Users/keven/Documents/carenet/orquestra-frontend/src/Beds/action"), Props>>'.
  Type 'typeof Beds' is not assignable to type 'ComponentClass<Matching<{ beds: DataBedsTypes[]; } & typeof import("/Users/keven/Documents/carenet/orquestra-frontend/src/Beds/action"), Props>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Matching<{ beds: DataBedsTypes[]; } & typeof import("/Users/keven/Documents/carenet/orquestra-frontend/src/Beds/action"), Props>' is not assignable to type 'Readonly<Props>'.
        Types of property 'loadBeds' are incompatible.
          Type '(data: DataBedsTypes[]) => { type: BedsTypes; payload: DataBedsTypes[]; }' is not assignable to type '() => void'.  TS2345

    46 |   mapStateToProps,
    47 |   mapDispatchToProps,
  > 48 | )(Beds);

我的组件

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { Row, Col } from 'config/styles';
import { ApplicationState } from 'config/store';
import { DataBedsTypes } from './types';
import * as BedsActions from './action';

import Bed from './Bed';

interface StateProps {
  beds: DataBedsTypes[];
}

interface DispatchProps {
  loadBeds(): void;
}

type Props = StateProps & DispatchProps;

class Beds extends Component<Props> {
  componentWillMount() {
    const { loadBeds } = this.props;
    loadBeds();
  }

  render() {
    const { beds } = this.props;
    return (
      <Row>
        {beds.map((b: DataBedsTypes) => (
          <Col key={b.pid} md={16.666} lg={10}>
            <Bed {...b} />
          </Col>
        ))}
      </Row>
    );
  }
}

const mapStateToProps = (state: ApplicationState) => ({ beds: state.beds.data });
const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(BedsActions, dispatch);

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

1 个答案:

答案 0 :(得分:0)

您的DispatchProps界面错误。现在,您说的是loadBeds的类型为void。您的界面应该是这样

interface DispatchProps {
  loadBeds: () => void;
}