Reactjs Can'；t使用react和redux处理typescript

我是打字新手，真的很努力。我不知道从哪里开始，从哪里结束。是的，互联网上有很多资源，但我无法获得这些信息并在我的项目中使用。希望在这里能遇到一些帮助。我也做了一些打字检查，如果你发现我可以做得更好，请告诉我如何改进。 因此，现在我正在与redux

MapStateTrops

和

mapDispatchToProps

作斗争。我尝试过许多变体，但每次都会出现一些错误。 我将发布表示连接到状态的仪表板组件的代码

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);

import*as React from'React'；
从'react redux'导入{connect}；
从“../SvgIcons”导入搜索图标；
从“../Map”导入MapComponent；
从“../../actions”导入{getEventInfo，getUserInfo}；
接口状态道具{
用户减速器：{
accessToken:字符串
},
eventReducer：{
事件：对象[]
}
}
界面分派道具{
dispatchUserInfo:（）=>无效；
dispatchEventInfo：（accessToken:string，query:string）=>void；
}
界面道具{
onSubmit：（e:React.FormEvent）=>void，
accessToken:string，
事件：对象[]
}
类型Props=StateProps&DispatchProps&OwnProps；
类DashboardPage扩展React.Component{
componentDidMount（）{
const{dispatchUserInfo}=this.props；
dispatchUserInfo（）；
}
handleEventSearch=e=>{
e、 预防默认值（）；
const{dispatchEventInfo，accessToken}=this.props；
常量查询：string=e.target.children[0]。值；
dispatchEventInfo（accessToken，查询）；
}
render（）{
const{events}=this.props；
返回(
搜寻


);
}
}
常量mapStateToProps=（状态：StateProps）=>{
const accessToken=state.userReducer.accessToken | |“”；
const events=state.eventReducer | |[]；
返回{
accessToken，
事件
};
};
const mapDispatchToProps=（调度：DispatchProps）=>({
dispatchEventInfo（查询：字符串，标记：字符串）{
调度（getEventInfo（查询、令牌））；
},
dispatchUserInfo（）{
调度（getUserInfo（））；
}
});
导出默认连接（mapStateToProps、mapDispatchToProps）（仪表板页面）；

这些是类型脚本错误

1） 参考

handleEventSearch`方法

[ts]参数“e”隐式具有“any”类型

2） 参考

mapDispatchToProps

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

3） 参考

connect HOC

类型为“（dispatch:DispatchProps）=>{dispatchEventInfo（查询：字符串，令牌：字符串）：void；dispatchUserInfo（）：void；}”的参数不能分配给类型为“MapDispatchToPropsParam”的参数

类型“（dispatch:DispatchProps）=>{dispatchEventInfo（查询：字符串，标记：字符串）：void；dispatchUserInfo（）：void；}”不能分配给类型“MapDispatchTopPropsFunction”

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

另外，如果你能为我提供非常好的源代码来学习react和redux与typescript的关系，那么我就可以轻松地编写代码了

您需要显式地提供事件类型，

any

或

反应事件

调度参数应为Redux的

Dispatch

类型

还有一点提示，您可以定义您的道具，如：

ReturnType&ReturnType&OwnProps

---

并删除不必要的接口

，这样工作正常，不，我只有一个错误`

const query:string=e.target.children[0].value**错误-[ts]属性“children”在类型“EventTarget”上不存在**这是打字中的一个老问题，我认为
currentTarget
instad的
target
打字很好，或者你可以在这里使用
any
，这没什么大不了的。你能举个用法的例子吗？
e.currentTarget.children[0]。value
，但是，由于您使用的是dom结构，所以它实际上可能不是类型化的。我想用any和event.target获取一个exapple