web-dev-qa-db-ja.com

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

この履歴プロップのタイプチェックを追加するには、withRouter HOCで親をラップすることで受け取りますか？私が考えることができる1つの方法は、このような何かを書くことです：

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

しかし、履歴オブジェクトの残りのプロパティが失われているため、これは正しい方法ではないと確信しています。

これを行う正しい方法を提案できますか？

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

しかし、今では次のエラーが発生しています：

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

RouteComponentPropsインターフェースを使用できます。これは、withRouterによって渡されるすべての小道具を宣言します。

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

RouteComponentPropsのtypeパラメーターは、paramsのmatchプロパティのタイプです。したがって、名前付きパスセグメントと一致しない限り、このパラメーターは必要ありません。

または、historyがwithRouterからではなく、それ自体がプロップとして渡される場合、historyからタイプをインポートできます。

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