浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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では関数定義時点で未定義っぽいので無理な気がします)、引数だけでも助けになります。

  • この記事いいね! (0)