toshi-toma blog

主にフロントエンド、作業ログあとは色々なメモ ✍️ 🍅

flowtypeについて調べた

flowtype 入門

これまでTypeScriptでの開発ばかりで、Flow(日本だとflowtypeって呼ばれてることが多い)は未経験でした。ついに触ることになりそうなので調べてみました。

flow.org

Flow(flowtype)

型アノテーションを付与している様子は、TypeScriptとさほど変わらないけど、あくまでFlowはJavaScriptに型アノテーションを付与しているだけという印象が強い。

型チェックの実行

  • flow コマンドでFlowのバックグラウンドプロセスが起動して、型チェックを実行
  • JavaScriptファイルに// @flowというコメントがあることで、Flowの型チェック対象と伝えることができる
    • 後述する　// @flow strictというコメントにすると、Flow Strictを有効にできる

コンパイル

型アノテーションを付与した状態だと、JavaScriptとしては動かないので、ビルド時に型アノテーションを取り除く必要がある。

  • Compilersとしては以下の選択肢がある
    • Babel(@babel/preset-flow)
    • flow-remove-types

設定ファイル

型アノテーション

ざっと以下のドキュメントに目を通して、TypeScriptでよく使うようなものはだいたい揃ってることがわかった。

あとは使ってみて、細かい違いとかは覚えたら良さそう。

flow.org

細かいメモ

  • Maybe型
    • Nullableの場合は型の前に?をつける
    • 以下はstring or null or undefined
x : ?string
  • TS同様にパラメータ名の後に?でOptional
value?: string
  • nullチェックやtypeof x === 'string'といったコードを使うことで型を絞れる
  • Union 型やIntersectionもTSと同じように使える
  • typeofで型を作れるのもTSと同じ
  • $ReadOnlyArrayや$ReadOnlyという組み込みの型がある
  • $Exactで余剰プロパティを防ぐ
    • {| name: string |};は省略記法
  • 型でもSpread 演算子がある
  • type Fooのように、type aliasもある
  • Tuple Typesもある
let tuple2: [number, boolean] = [1, true];

TSでいう〇〇は〇〇

flow-typed

  • TSでいうDefinitelyTyped
  • インストールした型はflow-typedディレクトリに入る
  • もし型が無い場合は以下のコマンドで型を作る
    • flow-typed create-stub {library}

Flow Strict

flow.org

Flow Strictを有効にしてより安全性の高いコーディングを行う - Qiita

  • ファイル単位でより厳密な型チェックを設定できる
  • configに設定する
[strict]
nonstrict-import
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
  • ファイルに // @flow strict を指定する

React + Flow

ドキュメントが用意されている

flow.org

  • @babel/plugin-transform-react-jsxにも対応している
[options]
react.runtime=automatic

VSCode

この拡張を使う

marketplace.visualstudio.com

  • javascript.validate.enable オプションをfalseにしないと、型注釈についてエラー出る
    • JSファイルなのに型注釈かけないよ。みたいな

M1 Mac

  • なぜか flowコマンドを実行すると、以下の表示で止まった
    • Please wait. Server is starting up: -