web-dev-qa-db-fra.com

Typescript: Comment ajouter un contrôle de type pour un objet d’historique dans React?

J'ai le morceau de code suivant, qui reçoit un objet d'historique comme accessoire:

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

Comment puis-je ajouter typecheck pour cet accessoire d'historique, qui est reçu en enveloppant son parent avec withRouter HOC? Une façon dont je pourrais penser est d'écrire quelque chose comme ceci:

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

Mais je suis sûr que ce n'est pas la bonne façon, car les autres propriétés de l'objet d'historique sont en train d'être perdues.

Pouvez-vous suggérer la bonne façon de faire cela?

MISE À JOUR du code basé sur la réponse de @ 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));

Mais maintenant je reçois l'erreur suivante:

Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.
    Property 'match' is missing in type '{ history: History; }'
reactjstypescripttypescript-typings
23
phoenix

Vous pouvez utiliser l'interface RouteComponentProps, qui déclare tous les props passés par withRouter:

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

Le paramètre type de RouteComponentProps est le type de la propriété params dans match, vous n'en aurez donc besoin que si vous faites correspondre les segments de chemin nommés.

Alternativement, si history ne provient pas de withRouter mais est transmis par lui-même comme un accessoire, vous pouvez importer le type de history:

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