Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Practical Flow Type
Search
yayoc
July 14, 2017
Programming
1
740
Practical Flow Type
Slides presented at gotanda.js
Nobuhide Yayoshi
yayoc
July 14, 2017
Tweet
Share
More Decks by yayoc
See All by yayoc
optional chainingの話
yayoc
0
270
Proxy's Black Magic
yayoc
0
180
What I did to improve performance score on Lighthouse
yayoc
2
2.7k
Other Decks in Programming
See All in Programming
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
360
Model Pollution
hschwentner
1
180
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.6k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.3k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
440
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
580
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
CSC305 Lecture 02
javiergs
PRO
1
260
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Documentation Writing (for coders)
carmenintech
75
5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building Applications with DynamoDB
mza
96
6.6k
Agile that works and the tools we love
rasmusluckow
331
21k
Producing Creativity
orderedlist
PRO
347
40k
Mobile First: as difficult as doing things right
swwweet
224
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Writing Fast Ruby
sferik
629
62k
Transcript
Practical FlowType @yayoc
Hello! I am Nobuhide Yayoshi 弥吉修英 You can find me
at @yayoc Frontend engineer, iOS At Fast Retailing
https://flow.org/
“ A static type checker for JavaScript Made By FB
Easy to adopt, easy to leave
Why Type Safety? ⊙ Efficient team development ⊙ Writing code
with confident ⊙ Documentable
Flow Type for Redux
Actions
Action Type with Union Type
Action Type Alias With Generics
Action Type Alias With Generics
$Exact
Without $Exact
Without $Exact
With $Exact
Reducer
Maybe, Optional
Refinements
$Exact Spread Object Issue! http://qiita.com/stomita/items/24a7d223acdc6a8715f4 https://github.com/facebook/flow/issues/2405
Flow Type for Class
Model Promise immutability
Model Promise immutability [flow] property `username` (user.js:20:7) Covariant property `username`
incompatible with contravariant use in assignment of property `username`
Model Promise immutability
Actions as Immutable
Flow Type for React Component
React PropTypes or Flow?
Components Prefer using Generic Style
Components Prefer using Generic Style
Components Prefer using Generic Style
React Component with $PropertyTypes
Adding Props With HOC
Adding Props With HOC
Adding Props With HOC
Error Case Adding Props With HOC
Other tips
https://github.com/flowtype/flow-typed flow-typed install Third Party https://github.com/facebook/immutable-js/blob/master/type -definitions/immutable.js.flow Finally, Immutable.js supports
Flow type in v4.0.0-rc1
Flow-coverage-report https://github.com/rpl/flow-coverage-report
Compare Typescript if you use Flow, you'll have much higher
type coverage much faster and you'll be able to sleep soundly. http://thejameskyle.com/adopting-flow-and-typescript.html
Swagger Flow Type A Swagger file has more than 8000
lines Writing Type Definitions manually is HARD
https://github.com/yayoc/swagger-to-flowtype https://github.com/yayoc/swagger-to-flowtype https://medium.com/@n_yayoshi/swagger-to-flowtype-generates-flow-type-aliases-8fab67776a4
None
swagger.yaml
flowtype.js
Conclusion ⊙ Utility types are useful ◦ $Exact ◦ $PropertyType
◦ Class ◦ Immutability ⊙ Prefer Flow than Proptypes ⊙ Prefer Generic Component ⊙ swagger-to-flowtype is useful
型安全 is Rock
We are hiring!!!
Thanks! Any questions? You can find me at @yayoc &
[email protected]
Credits Special thanks to all the people who made and
released these awesome resources for free: ⊙ Presentation template by SlidesCarnival ⊙ Photographs by Unsplash