今からReactを始める人に向けた型の話

周りでこれからReact始める人とかが増えてきて、以外と知られてないんだな〜ってことがあったのでReactに型をつけるというかTypeScript(以下ts), Flowと prop-typesの関係について書く

tl;dr

• prop-typeはやめとけ
• tsはいいぞ

prop-typesとは

昔はReactのcoreに入ってけどFlowが出てきたりでcoreから切り離して後方互換性のためにいパッケージとして切り出されたもの

Prop-TypesでもコンポーネントがどのようなPropsを受け取るのかを表現できなくはないが、Flow, tsに比べると表現力が乏しいので、これから作るもので使うのはおすすめしない

表現力が乏しいっていうのはPropTypesだとxは{a: number, b: number}のオブジェクト、yはただのnumberだとした時に以下のような定義になる

MyComponent.propTypes = {
  x: PropTypes.Object.isRequired,
  y: PropTypes.Number.isRequired
}

これがFlowやtsだと以下のように書けるのでxがaとbというプロパティを持っていることがわかる（例はtypescript）

type Props = {
  x: {a: number, b: number}
  y: number
}
function MyComponent(props: Props) {}

Flow

Flowはfacebook製のOSSでOCamlで実装されている

https://flow.org/

最近のは使ってないのでよくわかってないが、前に使った経験的にはtsより推論が賢かったイメージがある

Reactをよくある構成で使う時はflow-typedで型が見つかるが、ちょっと珍しいライブラリとかだと型定義自作する所から始まるイメージ 記事書きながら見てみたらめっちゃ増えてたけどtsに比べるとちょっと辛そう

github.com

TypeScript

令和の時代はライブラリもtsで書きますよねって発表されてるくらい来てるts

使い捨ての処理書く時とか以外は3, 4年前から仕事でもずっとts書いてる

Flowでいうflow-typed的な有志による型定義が集まってるDefinitelyTypedがとにかく色々あるので、最近はライブラリがtypescript用の型定義を用意してくれてるものも増えたけど、無い時はDefinitelyTyped探せばよっぽど変なライブラリを持ってこない限りは大体ここにあるイメージがある

型があると補完だったり、静的チェックだったりとにかく良いし、型推論が優秀なので関数のインターフェースをちゃんと書けば特に型を書かなくてもいい感じに推論してくれるので基本的にメリットを感じることはあってもデメリットを感じることはないです

まとめ

そもそもFlow, tsとprop-typesを同じレベルで言っていいのか？とか思ったけど今後説明しなくて良いように書いた

個人的にはtsをサポートしてるライブラリ等も増えてきてるし、関西だとkansai.tsとかあったりするので特段理由が無ければts使ってればいいのでは無いかと思う kansaits.connpass.com

最後に型がいい感じに書けた時とっても気持ちいいのでtsはいいぞ〜