React PropTypes対Flow

PropTypesとFlowは同様のものをカバーしていますが、異なるアプローチを使用しています。PropTypesはランタイム中に警告を出すことができます。これは、サーバーなどから送られる不正な形式の応答をすばやく見つけるのに役立ちます。ただし、Flowは未来のようで、ジェネリックスのような概念は非常に柔軟なソリューションです。また、Nuclideが提供するオートコンプリートは、Flowにとって大きなプラスです。

私の質問は、新しいプロジェクトを始めるとき、どちらが最善の方法かということです。または、FlowとPropTypesの両方を使用することは良い解決策になるでしょうか？両方を使用する場合の問題は、重複するコードを大量に作成することです。これは私が書いた音楽プレーヤーアプリの例です。

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

どちらの定義にも基本的に同じ情報が含まれており、データ型が変更された場合は、両方の定義を更新する必要があります。

型宣言をPropTypesに変換するこのbabelプラグインを見つけました。これは解決策かもしれません。

この質問をしてから1年後、私はこの問題についての私の経験についての最新情報を提供したいと思いました。

Flowが大きく進化したので、コードベースを入力し始め、新しいPropType定義を追加しませんでした。これまでのところ、これは良い方法だと思います。前述のように、プロップを入力するだけでなく、コードの他の部分も入力できるからです。これは、たとえば、状態で小道具のコピーがあり、ユーザーが変更できる場合に非常に便利です。また、IDEでのオートコンプリートは素晴らしい成果です。

一方向または逆方向の自動コンバーターは実際には離陸しませんでした。そのため、新しいプロジェクトの場合は、PropTypesではなくFlowを使用することをお勧めします（タイピングを2度行いたくない場合）。

両方がタイプチェックの非常に広い分野に属していることを除いて、2つの間にはあまり類似点がありません。

Flowは、言語のスーパーセットを使用する静的分析ツールです。これにより、すべてのコードに型注釈を追加し、コンパイル時にクラス全体のバグをキャッチできます。

PropTypesは、Reactにパッチされた基本的なタイプチェッカーです。特定のコンポーネントに渡される小道具のタイプ以外はチェックできません。

プロジェクト全体に対してより柔軟な型チェックが必要な場合は、Flow / TypeScriptが適切な選択です。注釈付きの型をコンポーネントに渡すだけである限り、PropTypesは必要ありません。

小道具の種類を確認するだけの場合は、コードベースの残りの部分を過度に複雑にしないで、より簡単なオプションを使用してください。

ここで見逃した点は、Flowが静的チェッカーであるのに対し、PropTypesはランタイムチェッカーであるということです。つまり、

• フローはコーディング中に上流のエラーをインターセプトする可能性があります：理論的には、あなたが知らないいくつかのエラーを見落とす可能性があります（たとえば、プロジェクトに十分なフローを実装しなかった場合、または深くネストされたオブジェクトの場合）
• PropTypesは、テスト中にそれらを下流でキャッチするため、見逃すことはありません

フローのみを使用して小道具のタイプを宣言してみてください。文字列ではなく数値など、正しくないタイプを指定してください。これは、フロー対応エディター内のコンポーネントを使用するコードでフラグが立てられることがわかります。ただし、これによってテストが失敗することはなく、アプリは引き続き機能します。

次に、不正なタイプのReact PropTypesの使用を追加します。これにより、テストが失敗し、アプリの実行時にブラウザコンソールでフラグが立てられます。

これに基づいて、フローが使用されている場合でも、PropTypesも指定する必要があるようです。