proptypesを使って、propのデータタイプをチェックする。

proptypesとは

proptypesとは、propsのタイプを確認するためのツールです。
アプリケーションでtypescriptのようなjavascript extensionsを使用しなくても、reactに内蔵されているproptypesを利用してpropsのタイプを確認or宣言することができます。
proptypes は性能上の理由から開発モードでのみ確認できます。すべてのプロップスのタイプを配信しようとすると、プロダクションモードで性能低下を引き起こす可能性があるから。
したがって、開発しながらエラーを認知して直していくという意味で使用します。

proptypes

ProptypeComponent.jsx

import React from 'react'
import PropTypes from 'prop-types';

function PropComponent(props) {
  return <div>
    {props.name}
    {props.age}
  </div>
}

// Component.defaultProps：propsの初期値を定義
PropComponent.defaultProps = {
  name: "jimmy",
  age: 7
}

// Component.propTypes：Propsのデータタイプを定義。
// .isRequiredをtypeに指定すると、必須propと認識し、値がなかったり、typeが誤ったらエラーを起こす！
PropComponent.propTypes = {
   name: PropTypes.string,
   age: PropTypes.number.isRequired,
 }


// ageに定義したfunctionはカスタムエラー関数であり、ageが7 or 8ではないとカスタムしたエラーMSGが
// 出力されます。
PropComponent.propTypes = {
  name: PropTypes.string,
  age: function(props, propName, componentName) {
    if (!/7|8/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
}


const Identity = ({ data }) => {
  return (
    <div>
      {data.map(({ name, age }) => <span key={name}>
      name is {name}, age is {age}
      </span>
      )};
    </div>
  );
}

// arrayof：dataは配列であり、配列の値がnameとageでなければなりません。
// shape：指定したオブジェクトと同じ形でなければエラー。
Identity.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired
    }),
  ).isRequired
};


export default function Component() {
  return (
    <div>
      <PropComponent />
      <Identity />
    </div>
  )
}