reactjs - 无法使用 react 和 redux 处理打字稿

问题描述

我是打字稿的新手，真的很挣扎。我不明白从哪里开始，从哪里结束。是的，互联网上有很多资源，但我无法获得这些信息并在我的项目中使用。希望在这里遇到一些帮助。我也做了一些类型检查，如果你发现我可以做得更好的东西，请告诉我改进它。所以现在我正在与 reduxmapStateToProps和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 tohandleEventSearch`方法

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

2) 指mapDispatchToProps

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

3) 指mapDispatchToProps在connect HOC

类型参数 '(dispatch: DispatchProps) => { dispatchEventInfo(query: string, token: string): void; 调度用户信息（）：无效；}' 不能分配给“MapDispatchToPropsParam<{ dispatchEventInfo(query: string, token: string): void; 调度用户信息（）：无效；}，{}>'。

类型 '(dispatch: DispatchProps) => { dispatchEventInfo(query: string, token: string): void; 调度用户信息（）：无效；}' 不能分配给类型 'MapDispatchToPropsFunction<{ dispatchEventInfo(query: string, token: string): void; 调度用户信息（）：无效；}，{}>'。

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

另外，如果您可以为我提供非常好的资源来学习使用 typescript 的 react 和 redux，那么我可以轻松编写我的代码。

标签： reactjstypescriptreduxreact-redux

reactjs - 无法使用 react 和 redux 处理打字稿

问题描述

解决方案

推荐阅读