コンパイル(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つの追加タイプがあります。

  • nodeelement すべてのDOMおよびReact要素のニーズに対応
  • instanceOf プロトタイプを掘り下げるため
  • oneOf 既知の潜在的な値のリスト
  • oneOfType 既知の潜在的なタイプのリスト
  • arrayOfobjectOf 単一のタイプで構成される配列およびオブジェクトの場合
  • shape 特定のスキーマの形をしたオブジェクトの場合
  • any 本当にタイプをチェックしたくないときのために

さらに、取り付けることができます isRequired 剛性を追加するためのPropType宣言に追加します。

hobbies: PropTypes.oneOf(['swimming', 'stalking']).isRequired

注意すべき点がいくつかあります。PropTypeチェックは本番環境では無効になっており、開発モードではガイドとしてのみ存在します。 エラーではなく警告をスローします

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