Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践投入してわかったflowtypeのメリデメ

Shin Suzuki
November 04, 2016

 実践投入してわかったflowtypeのメリデメ

facebook製の型チェッカ、flowを実践投入してみた結果、分かった良さと辛さを詰め込みました。

Shin Suzuki

November 04, 2016
Tweet

More Decks by Shin Suzuki

Other Decks in Programming

Transcript

  1. ಋೖ͕γϯϓϧ 1. npm i -D flow-bin ੩తղੳπʔϧͱͯ͠ɺ lintͱಉ༷ͷཱͪҐஔͰѻ͏ײ͡ɻ 2. npm

    i -D babel-plugin-transform-flow-strip-types 3. /* @flow */ pragmaを各ファイルの先頭行に入れる。 4. $(npm bin)/flow init で .flowconfigファイルを作成
  2. ࠷௿ݶͷΞϊςʔγϣϯͰ΋ॆ෼͏Ε͍͠ number, string, boolean, Array, Ϋϥεఆٛ ͙Β͍Ͱ΋ॆ෼ػೳ͢Δɻ React / React

    Nativeपลٕज़ͷܕ΋αϙʔτ͞Ε͍ͯΔͷͰɺ ҙ֎ʹɺ֎෦ϥΠϒϥϦͷܕఆ͕ٛͳͯ͘΋ͦ͜·Ͱਏ͘ͳ͍ɻ ٯʹflow-typedͷ඼ἧ͑͸ѱ͍··ɻɻɻ
  3. experimentalͳจ๏ͷҰ෦͸ղऍͰ͖ͳ͍ ྫ͑͹function bind syntaxΛ࢖͍͍ͨͱ͖͸ɺ ຊ౰ʹࢂΊͳࢥ͍Λ͢Δɻ flow annotations͸babel(babylon)ʹΑͬͯղऍ͞ΕΔ͕ɺ flowࣗମ͸OCaml੡ɻ ఏҊஈ֊ͷ࢓༷ͷ͢΂͕ͯར༻Ͱ͖ΔΘ͚Ͱ͸ͳ͍ɻ const

    newObject = /* ::`*/this.src::map((value) => value ** 2)/* ::`*/ ↑ ͜Ε͕΍Γ͍͚ͨͩͳͷʹ ↑ ↑ ͜ΜͳෆࢥٞͳίϝϯτΛڬ·ͳ͍ͱ͍͚ͳ͍͠ɺΤϥʔ͸཈੍͞ΕΔɻ Ͱ΋async / await͸ੲ͔Β༨༟Ͱ࢖͑ͨΓͱɺதͷਓͷ޷Έ΋͋Γͦ͏ɻ
  4. @flow Λ๨ΕΔͱԿ΋ͯ͘͠Εͳ͍ɻ Φʔόʔϩʔυ͸ͳ͍ Magic type͕υΩϡϝϯτ͞Ε͍ͯͳ͍(ͷʹศར) ϥΠϒϥϦʹ͢Δͱܕ৘ใ͕࢖͑ͳ͍ experimentalͳจ๏ͷҰ෦͸ղऍͰ͖ͳ͍ ґଘϞδϡʔϧͷflow versionʹറΒΕΔ node_modulesԼͷϑΝΠϧͰౖͬͯ͠·͏

    ઃఆϑΝΠϧ(.flowconfig)ͷਖ਼نදݱ͕ΧΦε όʔδϣϯ͕มΘΔͨͼʹΤϥʔ͕૿͑Δ 1ճઃఆ͢Ε͹͍͍΍ͭ ͠ΐ͏͕ͳ͍΍ͭ ͕࣌ղܾ͢Δ΍ͭ flow͕v1ʹͳΕ͹͍͍΍ͭ ࣮͸΋͏ղܾ͍ͯͨ͠΍ͭ Ͱ΋ਏ͍෦෼Λ·ͱΊΔͱ… ະདྷ͸໌Δ͍͸ͣʂ