Reactはじめたて(JSもほぼ初心者)なので自分用にReact.PropTypesの型チェックチートシートを記述します。
公式サイトの情報をベースに自分が欲しい情報を調べて加えたものです。
型の種類
配列(Array)
PropTypes.array
// [ "天海春香", "如月千早", "星井美希" ]
// 特定型の配列の指定も可能 下記は数値のみの配列の場合
PropTypes.arrayOf(PropTypes.number)
// [ 10, 20, 30 ]
論理型(Boolean)
PropTypes.bool
// true, false
関数(func)
PropTypes.func
// memo
数値型(Number)
PropTypes.number
// 2023
オブジェクト(Object)
PropTypes.object
/*
{
name: "天海春香"
age : 17
}
*/
// objectのvalue値の指定も可能
PropTypes.objectOf(PropTypes.number)
/*
{
width: 100,
height: 200
}
*/
文字列型(String)
PropTypes.string
// "piyo"
シンボル型(Symbol)
PropTypes.symbol
// Symbol('fuga')
Symbol型とは?
その値が一意となるプリミティブ型の一種。
シンボル名が一意となるため、等価比較でもfalseとなる。
参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol
なんでも
PropTypes.any
// なんでもいいのでそもそも書く必要がないと思われる。
Node型
// 数値型、文字列型、element型、array型を指定することが可能。レンダリングできるものならなんでも
PropTypes.node
// 例: "piyo", 2023, memo:elements, ["hoge", "fuga", "piyo"]
element(React Element) / elementTypes(React ElementType)
// React Element(インスタンス)
PropTypes.element
// 例: <MyComponent />
// React ElementType(クラス)
PropTypes.elementType
// 例: MyComponent
// 特定のComponentに限定したい場合
PropTypes.instanceOf(MyComponent)
elementとelementTypeの違いについて
elementはインスタンス、elementTypeはクラスだそう
参考: https://gotohayato.com/content/527/
型以外のオプション
指定したキーは指定した型でなければならない
PropTypes.shape({
name: PropTypes.string,
age : PropTypes.number
})
// キーが必ず必要というわけではない
/*
{
name: "如月千早"
age : 16
}
*/
指定した配列の中の要素のいずれしか受け付けない
PropTypes.oneOf(['男性', '女性', '無回答'])
// 男性, 女性, 無回答の3択しか受け付けない
型を複数指定でき、そのどれかであればいい
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
// stringかnumberであればいい
指定したキー以外の値があるとNG
PropTypes.exact({
name: PropTypes.string,
age : PropTypes.number
})
// nameとage以外の値があるとNG
指定した要素が欠けている場合NG
PropTypes.string.isRequired
// 指定した型の値が必須
その他
デフォルト値
PropTypesComponent.defaultProps = {
sampleKey: 'defaultの値'
}
// defaultPropsを使用してデフォルト値を設定することができる
カスタムルール
PropTypes.string.custumRule
// 見たことのない型指定ならカスタムルールかも