1. ホーム
  2. reactjs

タイプスクリプトです。Reactでhistoryオブジェクトの型チェックを追加する方法とは?

2023-10-05 03:39:56

質問

次のようなコードがあり、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>
);

このhistory propのtypecheckを追加するにはどうすればよいでしょうか。 で親をラップすることによって受け取られます。 ? 私が思いついた一つの方法は、このようなことを書くことです。

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

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

正しい方法を教えてください。

Oblosysの回答に基づいてコードをUPDATEしました。

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; }'

どのように解決するのですか?

この場合 RouteComponentProps で渡される全てのプロップを宣言するインタフェースです。 withRouter :

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

の型パラメータは RouteComponentProps の型は params のプロパティです。 match というプロパティがあるので、名前付きパスセグメントをマッチングするのでなければ、これは必要ありません。

あるいは、もし history から来ていない場合は withRouter から来るのではなく、それ自身がプロップとして渡される場合、その型をインポートすることができます。 history :

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