コンパイル(er…transpilation)がポストES5のデファクトスタンダードになるにつれて、JSXに傾倒するJS開発ランドスケープ(Babelのようなツールの世話)は、私たちの公正な言語の動的で強制的な方法を手放す時が来たのではないかという感情が高まっています。より賢明で静的にタイプされた方法を支持します。
これは、「もちろんですが、どこから始めればよいのでしょうか」などの質問につながります。
最大のキャンプはTypeScript(Microsoft)とFlow(Facebook)ですが、Reactで作業している場合は、コードベースに、習得するのと同じくらい簡単に実装できる、メンテナンスの少ない素晴らしい代替手段がすでにあります。
import React, { PropTypes } from 'react';
タイプを宣言およびチェックするための開発者向けのツールであるReact.PropTypesにようこそ。 確かに、それはすべてのプリミティブを処理します( array
, bool
, func
, number
, object
, string
, symbol
)簡単に:
function Nest({name}) {
return (
<div>
We called it {name}.
</div>
);
}
Nest.propTypes = {
name: PropTypes.string,
}
export default Nest;
しかし、かなり洗練された検証を管理するのに十分な深さもあります。
Nest.propTypes = {
name: PropTypes.string,
eggs: PropTypes.shape({
species: PropTypes.string,
femaleToMale: PropTypes.arrayOf(PropTypes.number),
hobbies: PropTypes.oneOf(['swimming', 'stalking']),
}),
}
オールインでは、小道具を投げるための9つの追加タイプがあります。
node
とelement
すべてのDOMおよびReact要素のニーズに対応instanceOf
プロトタイプを掘り下げるためoneOf
既知の潜在的な値のリストoneOfType
既知の潜在的なタイプのリストarrayOf
とobjectOf
単一のタイプで構成される配列およびオブジェクトの場合shape
特定のスキーマの形をしたオブジェクトの場合- と
any
本当にタイプをチェックしたくないときのために
さらに、取り付けることができます isRequired
剛性を追加するためのPropType宣言に追加します。
hobbies: PropTypes.oneOf(['swimming', 'stalking']).isRequired
注意すべき点がいくつかあります。PropTypeチェックは本番環境では無効になっており、開発モードではガイドとしてのみ存在します。 エラーではなく警告をスローします。
👉それだけです。 あなたは今、型チェックの専門家です。 意見のコンボでこの新しい力を乱用しないでください。