Reactjs Typescript：如何在React中为历史对象添加类型检查？

我有以下代码，它接收一个历史对象作为道具：

const ChildComponent = ({ history }) => (
        <div className={styles.body}>
            <div className={styles.cta}>
                <FloatingActionButton onClick={() => history.push(routes[4].path)}>
                    <span>Click me</span>
                </FloatingActionButton>
            </div>
        </div>
);

但我确信这不是正确的方法，因为历史对象的其他属性正在丢失

你能建议正确的方法吗

根据@Oblosys的答案更新了代码

import { withRouter, RouteComponentProps } from "react-router-dom";

interface Props extends RouteComponentProps<any> {
   /* Parent component's props*/
}

class Parent extends React.Component<Props, {}> {
    render() {
        return <ChildComponent history={this.props.history} />;
    }
}

//Child component related stuff
interface ChildComponentProps extends RouteComponentProps<any> {}

const ChildComponent: React.SFC<ChildComponentProps> = (props) => (
  <div className={styles.body}>
     <div className={styles.cta}>
         <FloatingActionButton onClick={() => history.push(routes[4].path)}>
            <span>Click me</span>
         </FloatingActionButton>
     </div>
   </div>
);

function mapStateToProps(state: types.AppState) {
    /* related code */
}

function mapDispatchToProps(dispatch: Redux.Dispatch<types.AppState>{
    /* related code */
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));

---

您可以使用

RouteComponentProps

接口，该接口声明通过

withRouter传递的所有props

：

import { RouteComponentProps } from 'react-router-dom';
..
interface ChildComponentProps extends RouteComponentProps<any> {
  /* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
  ..
);

---

对于带挂钩的React 16.8：

...
import {withRouter, RouteComponentProps} from 'react-router-dom';
...
const ChildComponent: React.FunctionComponent<RouteComponentProps> = ({history}) => {
...
}

。。。
从“react router dom”导入{withRouter，RouteComponentProps}；
...
const ChildComponent:React.FunctionComponent=（{history}）=>{
...
}

我找到的最简单的解决方案

import { RouteComponentProps } from 'react-router-dom';

....

interface Foo{
  history: RouteComponentProps["history"];
  location: RouteComponentProps['location'];
  match: RouteComponentProps['match'];
}

---

现在我得到了以下错误：类型“{history:history；}”不能分配给类型“ChildComponentProps”。类型“{history:history；}”中缺少属性“match”。如果使用路由器将

ChildComponent

包装在

withRouter

中，则无需显式传递

history

。如果您只想传递

history

，我添加了另一种解决方案。何时从

history

导入X，此历史记录包是什么？为什么我在package.json的任何地方都看不到它？我用的是包裹袋这一个：。您必须自己将其放入package.json中。这在TS>4.0的情况下对我不起作用。我必须做

RouteComponentProps[“history”]

。这仍然是一个非常有用的提示，如果你能调整答案，那就太好了！

import { History } from 'history';
..
interface ChildComponentProps {
  history : History
  /* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
  ..
);

...
import {withRouter, RouteComponentProps} from 'react-router-dom';
...
const ChildComponent: React.FunctionComponent<RouteComponentProps> = ({history}) => {
...
}

import { RouteComponentProps } from 'react-router-dom';

....

interface Foo{
  history: RouteComponentProps["history"];
  location: RouteComponentProps['location'];
  match: RouteComponentProps['match'];
}