Nagachan_T
@Nagachan_T (ナガちゃん)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

propsで関数を渡した際に、当該関数に引数が指定されていることをlintの段階で保証したい

解決したいこと

Reactの関数コンポーネントで、propsに関数を入れた際に、関数の引数指定がされていることをコードを書いた時点で確かめたいのですが、どうすればよいのでしょうか。

発生している問題

例えば以下のコンポーネントを作りました。

export function Child({onChange}:{onChange:(newValue: string) => void}) {
    return <>{/*中身は省略*/}</>
}

それを呼び出す際に、以下のようにしてもChildをlintに叱られることなく呼び出せてしまいます。

export function Parent() {
    return (<Child onChange={() => {/*何かする*/}} />)
}

このとき、lintを使ってChildonChangepropsの中で何かしらの引数がカッコ内にあることを確かめることはできるのでしょうか。

自分で試したこと

以下のキーワードで調べましたが、該当する情報はありませんでした。

  • react typescript props function ensure one arg
  • react typescript props function ensure one parameter
1

1Answer

propTypes の出番ではないでしょうか?

多分今回のは コンポーネントに対して .propTypes で定義する感じでしょうか?
ただ、引数の数については特に用意されていないので custom validator 組む必要ありそうですが。

0Like

Comments

  1. @Nagachan_T

    Questioner

    @juner
    ありがとうございます。空き時間に調べてみます。

Your answer might help someone💌