【React】propTypesを使って受け取ったpropsの型を定義する

propTypesによって、propsから受け取る値のタイプを定義することができます。
エラーは出ませんが、警告を出してくれます。
バリデーションのような感じで使えます。

import React from 'react';
import PropTypes from 'prop-types'; // インポートする

const App = () => {
  const details = [
    {name: "Meow", age: 10},
    {name: "Hanada", age: 20}
  ]
  return (
    <div>
      {
        details.map((detail, index) => {
          return <Cat name={detail.name} age={detail.age} key={index}/>
        })
      }
    </div>
  )
}

const Cat = (props) => {
  return <div>My name is {props.name}.My age is {props.age}</div>
}

// propTypesでpropsの型を定義する
Cat.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
}

export default App;

propTypesの部分の解説をします。

  name: PropTypes.string,

上記では、nameというpropsプロパティではstring型（文字列型）のものしか受け付けないという設定にしています。

  age: PropTypes.number.isRequired

上記では、ageというpropsプロパティではnumber型（数字型）のものしか受け付けないという設定とともに、isRequiredで「絶対に値を設定しなければならない」というルールを定めています。

上記全てのルールを破ってみましょう。

// 省略
const App = () => {
  const details = [
    {name: 10, age: "ageage"},
    {name: "Tarou"},
  ]
// 省略

すると以下のような警告がコンソールに吐き出されました。

出力はされているものの、定義したデータ型とは異なるという警告になっていますね。