Reactガイドを読んでいくその102

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

静的型チェック

Flow の型定義をコンパイル時にコードから剥がす

FlowはJavaScriptを拡張したものだが、ブラウザ側はFlowの記法については知らないため、
ブラウザに送信されるコンパイル後のJavaScriptバンドルに含まれないようにしないといけない。

方法はコンパイルツールによって異なり、それぞれに合わせた対応が必要。

• Create React App ビルド時に自動でJavaScriptにバンドルしないよう設定されているので
  通常通り作業をすれば問題なし。

• Babel ひと手間加える必要がある。
  yarn
  yarn add --dev @babel/preset-flow
  npm
  npm install --save-dev @babel/preset-flow

flowのプリセットをBabelの設定ファイルに追加していく。

{
  "presets": [
    "@babel/preset-flow",
    "react"
  ]
}

• その他 flow-remove-typesを使用して型定義を剥がすことができる。

今日はここまで。