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

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

Avatar for Shin Suzuki Shin Suzuki
November 04, 2016

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

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

Avatar for Shin Suzuki

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ʹͳΕ͹͍͍΍ͭ ࣮͸΋͏ղܾ͍ͯͨ͠΍ͭ Ͱ΋ਏ͍෦෼Λ·ͱΊΔͱ… ະདྷ͸໌Δ͍͸ͣʂ