ReactのPropTypes Validatorについて

React の PropTypes Validator についてのメモ

PropTypes Validator とは

React コンポーネントで型チェックをするためのもの。

コンポーネントがどんな属性を持っていて、どんな属性が必須で、どんなタイプの値を貰うべきかを定義するもの。

もともとは、React 本体にReact.PropTypesとして定義されていた。

現在では、prop-typesとして別パッケージとして切り出されている。

prop-types を導入する

prop-typesは以下のコマンドでインストールできる。

1
$ npm i --save prop-types

TypeScript や Flow も PropType Validator の代替として使える。

それらの静的型チェックの方法については、公式を参照のこと。

PropTypes Validator の記述方法

PropTypesを import した上で、コンポーネントのpropTypesプロパティに、オブジェクトとして設定する。

型チェック

型チェックのための値はPropTypesのプロパティとして用意されている。

PropTypes.objectPropTypes.arrayは非推奨となっている。

そのために代わりに、PropTypes.objectOfまたは、PropTypes.shapePropTypes.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| 型はなんでも良いが必須チェック。|

サンプル

以下はidname, ageというプロパティを持つEmployeeというコンポーネントの例。

各プロパティの型と、idnameが必須であることを定義している。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
};

参考リンク