打字稿:如何在 React 中为历史对象添加类型检查? [英] Typescript: How to add type check for history object in React?

问题描述

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

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

);

我如何为这个历史道具添加类型检查，它是通过用 withRouter HOC 包装它的父级来接收的?我能想到的一种方法是写这样的东西:

接口道具{历史: {推(网址:字符串):无效；};}

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

你能建议正确的方法吗?

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

import { withRouter, RouteComponentProps } from react-router-dom";interface Props 扩展 RouteComponentProps{/* 父组件的 props*/}class Parent 扩展 React.Component{使成为() {return ;}}//子组件相关的东西接口 ChildComponentProps 扩展了 RouteComponentProps{}const ChildComponent: React.SFC=(道具)=>(<div className={styles.body}><div className={styles.cta}><FloatingActionButton onClick={() =>history.push(routes[4].path)}><span>点击我</span></FloatingActionButton>

);函数 mapStateToProps(state: types.AppState) {/* 相关代码 */}function mapDispatchToProps(dispatch: Redux.Dispatch{/* 相关代码 */}导出默认 withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));

但是，现在我收到以下错误:

输入 '{ history: History;}' 不可分配给类型 'ChildComponentProps'.类型{ history: History;"中缺少属性match"}'

解决方案

你可以使用 RouteComponentProps 接口，该接口声明了 withRouter 传递的所有 props:

import { RouteComponentProps } from 'react-router-dom';..接口 ChildComponentProps 扩展了 RouteComponentProps{/* ChildComponent 的其他道具 */}const ChildComponent : React.SFC= ({历史}) =>(..);

RouteComponentProps 的类型参数是 match 中的 params 属性的类型，所以除非你是匹配命名的路径段.

或者，如果 history 不是来自 withRouter 而是作为 prop 自身传递，你可以从 history 导入类型:

import { History } from 'history';..接口 ChildComponentProps {历史:历史/* ChildComponent 的其他道具 */}const ChildComponent : React.SFC= ({历史}) =>(..);

I have the following piece of code, which receives a history object as prop:

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

How do I add typecheck for this history prop, which is received by wrapping it's parent with withRouter HOC? One way I could think of is to write something like this:

interface Props {
    history: {
        push(url: string): void;
    };
}

But I'm sure this is not the right way, because rest of the properties of the history object are being lost.

Can you suggest the right way of doing this?

UPDATED the code based on @Oblosys's answer

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

But, now I'm getting the following error:

Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.
    Property 'match' is missing in type '{ history: History; }'

解决方案

You can use the RouteComponentProps interface, which declares all props passed by withRouter:

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

The type parameter to RouteComponentProps is the type of the params property in match, so you won't need it unless you're matching named path segments.

Alternatively, if history doesn't come from withRouter but is passed by itself as a prop, you can import the type from history:

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

这篇关于打字稿:如何在 React 中为历史对象添加类型检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！