【React】複雑な props を prop-types で定義する

　prop-types は生の JavaScript で React コンポーネントに渡される props の型を定義するためのライブラリです。JavaScript のみの開発環境において TypeScript の代替になります。
facebook/prop-types： Runtime type checking for React props and similar objects
　これは次の様に props を定義できます。、オブジェクト、配列、関数といった複雑な構造をした props の型を決定する方法を紹介しします。

component.propTypes = {
    label: PropTypes.string.isRequired,
    name: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

　一番頼りになる使い方ドキュメントは GitHub リポジトリの Usage です。この記事になくても大体ここにあります。
facebook/prop-types： Runtime type checking for React props and similar objects#usage
　オブジェクトと配列は次の様に記述できます。

memberComponent.propTypes = {
  member: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    // shape でオブジェクト定義
    imageUrls: PropTypes.shape({
      // arrayOf で配列定義
      profile: PropTypes.arrayOf(PropTypes.string),
      avater: PropTypes.arrayOf(PropTypes.string),
    }),
    // shape, arrayOf どちらも PropTypes をネストできる
    tickets: PropTypes.arrayOf(PropTypes.shape({
      ticketToken: PropTypes.string,
      status: PropTypes.number,
      createdAt: PropTypes.string,
      updatedAt: PropTypes.string,
    })),
  }),
}

　記述量がいささか手間ですがこれで複雑な構造体も把握できます。
　積極的に作るほどではないですが関数の定義もできます。

component.propTypes = {
  // 単に関数であるとするだけなら func のみで十分
  onChange: PropTypes.func,
  // カスタムバリデーションと JavaScript の関数はオブジェクトという特性を絡めます
  onClick : (props, propName, componentName) => {
    const fn = props[propName];
    // typeof で型が分かり、function の length は引数
    if((typeof fn !== 'function' || fn.length !== 2)) {
        return new Error(propName + 'は引数が二つの関数です');
    }
  }
}

　返り値の検査の仕方は分かりませんでしたが（素のJavaScriptでは関数定義時点で未定義っぽいので無理な気がします）、引数だけでも助けになります。