react-multi-caroucel のCustomArrow　をTypeScriptで実装できない

環境、該当ツール

当方、React,TypeScript環境でフロント画面を作成しています。

基本的にFunctionalComponentとして記載しています。

以下、苦戦しているmoduleの情報です。

npmのリンク

githubのリンク

実現したいこと

storybookのデモページにあるように「>」だけのスライドボタンをTypeScriptの実装で実現したいです。

試してみたこと

ここに書かれているCustomArrows(スライドさせるためのボタン)を使って、ボタンをカスタマイズしようとしているのですが、正しく適用されません。

そのfunction内に、storybookのサンプルコードを参考に以下のように記載してみると、もちろんTypeScriptなので動きません。

TypeScript
1const CustomRightArrow = ({ onClick }) => {
2  // FontAwesomeのアイコンを使用
3  return <i className="fa fa-angle-left" onClick={() => onClick()} />;
4};

onClickの型が暗黙的にanyになる　とのことなので、
色々とgoogle上で調べて出てきたonClickの型を指定してみたのですが、正しくコンパイルできません。

TypeScript
1const CustomRightArrow = ({ onClick: (event: React.MouseEvent<HTMLInputElement>) => void }) => {
2  // FontAwesomeのアイコンを使用
3  return <i className="fa fa-angle-left" onClick={() => onClick()} />;
4};
5
6<Carousel customRightArrow={<CustomRightArrow />} ...

TypeScript
1const CustomRightArrow = ({ onClick:React.MouseEvent<HTMLInputElement> }) => {
2  // FontAwesomeのアイコンを使用
3  return <i className="fa fa-angle-left" onClick={() => onClick()} />;
4};
5
6<Carousel customRightArrow={<CustomRightArrow />} ...

onClickの型定義方法
そもそものCustomRightArrowの実装方法

どこに問題があるのでしょうか。

ご教授頂けますと幸いです。

maisumakun

2019/10/30 01:57

どのようなコンパイルエラーが出ましたか？実際に出たエラーメッセージを貼っていただけると幸いです。

退会済みユーザー

2019/10/30 02:50 編集

退会済みユーザー

2019/10/30 02:53

退会済みユーザー

2019/10/30 02:56

ちなみに、vscodeで変数にフォーカスを合わせると型が表示されるのですが、onClickの定義をフォーカス合わせると「React.DOMAttributes<HTMLElement>.onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined」と出てきました。