[React] PropsTypesを使って型チェック

Reactに久しぶりに触って忘れていたことをメモとして残します。

Reactのバージョンは16.13.1 を使いました。

前提

import React from 'react';

const persons = [
  {
    name: "User1", age: 30
  },
  {
    name: "User2", age: 28
  },
  {
    name: "User1", age: 32
  }
]

const Person = (props) => {
   return <div>名前: {props.name} 年齢: {props.age}歳 </div>
}

const App = () => {
  return(
    <React.Fragment>
        {
          persons.map((person, index) => ({
            <Person name={person.name} age={person.age} key={index}/>;
          }))
        }
    </React.Fragment>
  )
}

export default App;

PropsTypesを使った型チェック

//追加
import PropTypes from 'prop-types';

//追加
Person.propsTypes = {
  name: PropTypes.string,
  age: PropTypes.number
}

• React v15.5より別のライブラリ(props-types)から読み込まないといけない.
• 型をPropsTypesを使って管理できる.

データの値を不正な値にした場合

const persons = [
  {
    name: "User1", age: "30"
  },
  {
    name: "User2", age: 28
  },
  {
    name: "User1", age: 32
  }
]

本来はPersonコンポーネントのpropsであるageの型はnumber型でないといけないが、personsの最初の配列のデータのageをstringで定義した場合

コンソールを確認すると警告を出してくれる。

index.js:1 Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `Person`, expected `number`.
    in Person (at App.js:32)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

propsの値を必須にする

Personのコンポーネントのnumberを必須にした場合

//追加
import PropTypes from 'prop-types';

//追加
Person.propsTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
}

const persons = [
  {
    name: "User1"
  },
  {
    name: "User2", age: 28
  },
  {
    name: "User1", age: 32
  }
]

ageを必須にしたのにも関わらず、personsの最初のデータの値にageを持たせていない状態で定義した場合 以下のように警告を出してくれる

index.js:1 Warning: Failed prop type: The prop `age` is marked as required in `Person`, but its value is `undefined`.
    in Person (at App.js:32)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)