Question

我是打字稿新手，确实很挣扎。我不知道从哪里开始和从哪里结束。是的，互联网上有许多资源，但是我无法在项目中获取和使用这些信息。希望在这里遇到一些帮助。我也做了一些类型检查，如果您发现我可以做得更好的事情，请告诉我进行改进。因此，现在我正在努力使用redux mapStateToProps和mapDispatchToProps。我尝试了许多变体，但是每次遇到某种错误时，我都会尝试。我将发布代表连接到state的仪表板组件的代码。

import * as React from 'react';
import { connect } from 'react-redux';
import SearchIcon from '../SvgIcons';
import MapComponent from '../Map';
import { getEventInfo, getUserInfo } from '../../actions';

interface StateProps {
  userReducer: {
    accessToken: string
  },
  eventReducer: {
    events: object[]
  }
}

interface DispatchProps {
  dispatchUserInfo: () => void;
  dispatchEventInfo: (accessToken: string, query: string) => void;
}

interface OwnProps {
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void,
  accessToken: string,
  events: object[]
}

type Props = StateProps & DispatchProps & OwnProps;

class DashboardPage extends React.Component<Props, {}> {              
  componentDidMount() {
    const { dispatchUserInfo } = this.props;
    dispatchUserInfo();
  }

  handleEventSearch = e => {
    e.preventDefault();
    const { dispatchEventInfo, accessToken } = this.props;
    const query: string = e.target.children[0].value;
    dispatchEventInfo(accessToken, query);
  }

  render() { 
    const { events } = this.props; 
    return (
      <div className="dashboard-container">
        <div className="search-event">
          <form className="search-event__form" onSubmit={this.handleEventSearch}>
            <input
              autoComplete="off"
              type="text"
              name="search-event"
              placeholder="Search an event"
              className="search-event__input"
              aria-label="Enter search text"
            />
            <button type="submit" className="search-event__button">
              <SearchIcon />
              Search
            </button>
          </form>
          <p className="sign-out">
            <a href="/api/logout" className="btn btn--sign-out sign-out__button">Sign out</a>
          </p>
        </div>
        <div className="google-map">
          <MapComponent events={events} />
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state: StateProps) => {
  const accessToken = state.userReducer.accessToken || '';
  const events = state.eventReducer || [];
  return {
    accessToken,
    events
  };
};

const mapDispatchToProps = (dispatch: DispatchProps) => ({
  dispatchEventInfo(query: string, token: string) {
    dispatch(getEventInfo(query, token));
  },
  dispatchUserInfo() {
    dispatch(getUserInfo());
  }
});

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

这些是打字稿错误1) Refers to handleEventSearch`方法

[ts]参数'e'隐式具有'any'类型。

2）指向mapDispatchToProps

[ts]无法调用类型缺少调用签名的表达式。类型“ DispatchProps”没有兼容的呼叫签名。

3）在mapDispatchToProps中引用了connect HOC

类型'（dispatch：DispatchProps）=> {dispatchEventInfo（query：string，token：string）：void; dispatchUserInfo（）：void; }'不能分配给'MapDispatchToPropsParam <{类型的参数：dispatchEventInfo（query：string，token：string）：void; dispatchUserInfo（）：void; }，{}>'。

Type'（dispatch：DispatchProps）=> {dispatchEventInfo（query：string，token：string）：void; dispatchUserInfo（）：void; }'不能分配给类型'MapDispatchToPropsFunction <{dispatchEventInfo（query：string，token：string）：void; dispatchUserInfo（）：void; }，{}>'。

参数“ dispatch”和“ dispatch”的类型不兼容。     类型“ Dispatch>”不可分配给类型“ DispatchProps”。     类型“ Dispatch>”中缺少属性“ dispatchUserInfo”。

如果您能为我提供很好的资源来学习有关typescript的react和redux的信息，那么我可以轻松地编写代码。

Answer 1

您需要明确提供事件类型，any或 React.SyntheticEvent<...something>
调度参数应为Redux的Dispatch类型

还有一些技巧，您可以定义自己的道具，例如：
ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & OwnProps
并删除不必要的接口

无法使用React和Redux处理打字稿

1 个答案: