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
670
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
240
Proxy's Black Magic
yayoc
0
150
What I did to improve performance score on Lighthouse
yayoc
2
2.6k
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
870
Java ジェネリクス入門 2024
nagise
0
610
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Golang と Erlang
taiyow
8
1.9k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
macOS でできる リアルタイム動画像処理
biacco42
7
1.9k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
Macとオーディオ再生 2024/11/02
yusukeito
0
200
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
We Have a Design System, Now What?
morganepeng
50
7.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Scaling GitHub
holman
458
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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