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
720
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
260
Proxy's Black Magic
yayoc
0
170
What I did to improve performance score on Lighthouse
yayoc
2
2.6k
Other Decks in Programming
See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
620
人には人それぞれのサービス層がある
shimabox
3
470
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
Perlで痩せる
yuukis
1
660
インターフェース設計のコツとツボ
togishima
2
490
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A designer walks into a library…
pauljervisheath
205
24k
Docker and Python
trallard
44
3.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Why Our Code Smells
bkeepers
PRO
336
57k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Balancing Empowerment & Direction
lara
1
90
A better future with KSS
kneath
239
17k
Building an army of robots
kneath
306
45k
A Tale of Four Properties
chriscoyier
159
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
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