React.PropTypeを使用した型の操作

コンパイル（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チェックは本番環境では無効になっており、開発モードではガイドとしてのみ存在します。 エラーではなく警告をスローします。

👉それだけです。あなたは今、型チェックの専門家です。意見のコンボでこの新しい力を乱用しないでください。