React の PropTypes Validator についてのメモ
PropTypes Validator とは
React コンポーネントで型チェックをするためのもの。
コンポーネントがどんな属性を持っていて、どんな属性が必須で、どんなタイプの値を貰うべきかを定義するもの。
もともとは、React 本体にReact.PropTypesとして定義されていた。
現在では、prop-typesとして別パッケージとして切り出されている。
prop-types を導入する
prop-typesは以下のコマンドでインストールできる。
$ npm i --save prop-types
TypeScript や Flow も PropType Validator の代替として使える。
それらの静的型チェックの方法については、公式を参照のこと。
PropTypes Validator の記述方法
PropTypesを import した上で、コンポーネントのpropTypesプロパティに、オブジェクトとして設定する。
型チェック
型チェックのための値はPropTypesのプロパティとして用意されている。
PropTypes.objectとPropTypes.arrayは非推奨となっている。
そのために代わりに、PropTypes.objectOfまたは、PropTypes.shape、PropTypes.arrayOfを使う。
| 型 | 説明 |
|---|---|
| PropTypes.array | 配列であることをチェック。 |
| PropTypes.bool | 真偽値であることをチェック。 |
| PropTypes.func | 関数であることをチェック。 |
| PropTypes.number | 数値であることをチェック。 |
| PropTypes.object | オブジェクトであることをチェック。 |
| PropTypes.string | 文字列であることをチェック。 |
| PropTypes.symbol | シンボルであることをチェック。 |
| PropTypes.objectOf | 引数に渡した型のオブジェクトであることをチェック。 |
| PropTypes.shape | 引数に渡した型のオブジェクトであることをチェック。 |
| PropTypes.arrayOf | 引数に渡した型の配列であることをチェック。 |
| PropTypes.node | レンダリングできる値であるかチェック。 |
| PropTypes.element | React element であるかチェック。 |
| PropTypes.instanceOf | 引数に渡した型のインスタンスであるかチェック。 |
| PropTypes.oneOf | 引数に渡した配列の値のどれかであるかチェック。 |
| PropTypes.any.isRequired | 型はなんでも良いが必須チェック。 |
サンプル
以下はidとname, ageというプロパティを持つEmployeeというコンポーネントの例。
各プロパティの型と、idとnameが必須であることを定義している。
import PropTypes from 'prop-types';
const Employee = (props) => {
const {id, name, age} = props;
return (
<div>
<span>{`id: ${id}`}</span>
<span>{`name: ${name}`}</span>
{
age ? <span>`age: ${age}`</span> : ''
}
</div>
)
};
Employee.propTypes = {
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
age: PropTypes.number
};