web-dev-qa-db-ja.com

React-TypeScript vs Flow vs？

現在Reactを学んでおり、かなりよく理解していると思います。ただし、堅牢なReactアプリケーションの開発に関して悩まされていることが1つあります。開発者は静的型チェックにどのツールを使用しますか？

TypeScriptが大好きです。型チェックやその他の便利な機能のおかげで、JavaScriptアプリケーションの開発の苦痛が大幅に軽減されると思います。 Visual Studio Codeは、本当に素晴らしいコード補完も提供します。そして、 typings + DenifitelyTyped を使用することで、Reactで動作させることができることを知っています。

実は、React + TypeScriptの使用に関するチュートリアルはあまりありません。また、このコンボを使用した開発に関する記事はあまりないようです。一方で、多くの人々が Flow を使用しているようです。これはFacebookが支援するプロジェクトです（そして彼らも使用していると思います）。

React + TypeScript/React + Flowの方法について賛否両論で Redditについての議論 を見つけることができました。しかし、私にとっては、今では約10か月であるため、かなり時代遅れに見えます。それ以来、多くのことが変わったと思います。

React + Flow と React + TypeScript の使用に関する2つの記事も見つけました。著者は、両方のオプションを使用するときに遭遇するいくつかの問題を述べ、特にFlowプロジェクトには多くの問題があり、Facebookからの開発者のアクティビティが少ないため、TypeScriptは「現時点での最善策」であると結論付けています（2015年11月）。彼はまた、バベルとうまくプレイできないと言っていますか？

だから、質問は次のようになると思います：React + TypeScriptコンボを使用するのは安全ですか、それともいくつかの困難に直面しますか？フローはどうですか？チェックアウトする必要がある他の同様のツールはありますか？どのアプローチをお勧めしますか？

2017年9月更新：

TypeScriptの毎日の使用に1年以上の経験があり、Flowでしばらく遊んでいると、次の結論に達しました。

  • TypeScriptを使用するのは今でも苦痛です。問題は、JavaScriptの世界が非常に速く移動するため、TypeScriptが遅れをとっていることです。その派手な新しいES7ステージ3機能の使用を考えていますか？いいえ、できません。一部のライブラリの最新バージョンのタイプヒントを取得したいですか？ 1か月、2か月、それ以上...
  • フローは長い道のりを歩んできました。大幅に改善され、TSではできないいくつかのことをキャッチできます。何よりも、最終的にWindowsで機能します。また、VS Code用の優れたプラグインがあります（3/5の評価しか持たない理由はわかりません）。 React Nativeで100％動作しますが、TypeScriptはまだ50％でもありません。
  • ほとんどの場合、型はまったく必要ありません。追加のタイピングすべてに価値があることはめったにありません。 JSは動的に型付けされた言語です。それを乗り越えてください:)

TL; DR：タイプチェッカーを使用する場合は、Flowを使用することをお勧めします。

2019年2月更新：

上記の推奨事項は時代遅れになっており、もはや関係がないと思います。 3つの理由：

だから、TypeScriptは2019年のFlowよりも実用的な選択だと思います。

タイプチェッカーを使用する価値があるかどうかについては、プロジェクトのサイズに依存すると思います。小さなプロジェクトにはおそらく必要ありません。

javascriptreactjstypescriptbabeljsflowtype
46
Honza Kalfus

Flowを使用したことがないので、この回答を始めます。したがって、Flowについてはあまり説明できません。しかし、私たちはReactとTypeScriptを使用しており、うまく機能しています。

リファクタリング、タイプセーフティ、オートコンプリートなど、すでにご存知のすべてのメリットがあります。

もちろん、フローシンタックスはTypeScriptよりもクリーンですが、TypeScriptを使用してインクリメンタルに型を追加できます。これはもっと好みの問題だと思う。コードを明示的に入力することを好む人もいれば、入力を少なくして型推論を強化する人もいます。

TypeScriptが安全だと思うテクノロジーについては、Microsoftが言語をプッシュしています（ 近々バージョン2があります ）、Angularはよく、多くのAngular開発者がいます。ここSOでも、TypeScriptタグには4Kを超えるフォロワーがいます。未回答の質問があることはめったにありません。

TypeScriptの大きな問題は、少なくとも私たちにとっては、時々、型定義を持たないコンポーネントまたはライブラリを使用することを決定するため、自分で作成する必要があるということです。しかし、私はそれがコミュニティに貢献する方法だと思います。

18
thitemple

私は自分自身に同じ質問をしましたが（Reactではそうではありませんでした）、次の記事がこの2つの評価に役立ちました。

フロー設計者が採用したアプローチは、より優れた型推論とヌルに対する優れたアプローチにより、より機能的だと感じています。ただし、TypeScriptは、特に http://definitelytyped.org/ を介してサードパーティライブラリの型をプルすることに関して、より優れたコミュニティサポートを提供します。 TypeScriptはMicrosoftによって作成されており、コンパイラーの記述とテクノロジーの好ましい方向への進化に豊富な歴史があります-ここで注目すべきは、C＃と、null以外の型を既に追加しているという事実です（2016-07-11）： https ：//blogs.msdn.Microsoft.com/TypeScript/2016/07/11/announcing-TypeScript-2-0-beta/

TypeScriptは今日、より安全な賭けのようです。

そして、既存のコードベースでTypeScriptを試してみる人にとって、私はtsconfig.jsonファイルの次の設定がTypeScriptをJavaScriptとうまく共存させるのに非常に役立つことを発見しました（一度に1ファイルずつ移行できるようにします）：

{
    "compilerOptions": {
        "allowJs": true,
        "isolatedModules": true,
        ...
    }
}
6
Spritely

私のReact開発では、非常に複雑です Babel / Webpack / Flow / Mocha toolchainを設定し、Flowで問題が発生したことはありません。すべてを設定するために多少の努力を要します（Webpackは最初は気が遠くなる可能性があります）が、その後は正常に動作します。対照的に、TypeScriptは単なる型推論/静的型チェッカーツール以上のものを目指しているため、追加の手荷物と仮定が必要になります。Reactは、TypeScriptがJavaScriptの上に効果的にレイヤー化された言語である一方で、Microsoftがその原点を確実に推進するために、TypeScriptファイルには通常異なる拡張子（.ts の代わりに .js）現在、別の言語を使用しているため、理解できましたか？

TypeScriptはコード生成を使用してJavaScriptを吐き出しますが、Flowでは注釈は単純に取り除かれ、コード生成はありません。過去に、TypeScriptを宣伝しているMicrosoftの人々は、コード生成が「ファイルローカル」である旨のステートメントを作成していました（使用されている正確な用語は覚えていません）。これは、TypeScriptコンパイラーが魔法のようなことを何もしていないという安心感を提供するはずでした。とにかく、そのステートメントが目立つように表示されることはもうありません。 Flowを使用すると、プレーンJavaScript（またはBabelを構成したECMAバージョン）で記述するような保証は必要なく、注釈は、前述のように単純に削除されます。

TypeScriptが非倫理的で疑わしい技術慣行に特化した会社から来ていることは言うまでもありません（TypeScriptが最終的にすべてのEmbrace-Extend-Extinguishの策略の母になる可能性があることを否定しません）。マイクロソフト Javascriptを失敗させる力ですべてを行った 彼らが（正しく遅ればせながら）彼らが表す脅威を予見し、それでも彼らのくだらないオペレーティングシステムと肥大化したオフィスを予見したことを忘れないでくださいスイート。

さらに、Flowの型システムはmuch前回TypeScriptを評価するのが面倒で（2015年頃）より強力で、インクリメンタルまたは散発的に適用するのがはるかに簡単でしたソースで。サードパーティのライブラリを統合するために flowtyped を使用していますが、そこにあるライブラリを自分の定義で補完する必要があることは非常にまれです。

最後に、AngularはTypeScriptを使用しているという事実は、Angularは新しいプロジェクトに実際には関係ありません。React has手を取り合って、先に進む時間です。

1
Marcus Junius Brutus