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
Outline View in SwiftUI
1024jp
1
330
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
240
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
RubyLSPのマルチバイト文字対応
notfounds
0
120
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
CSC509 Lecture 12
javiergs
PRO
0
160
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Remix on Hono on Cloudflare Workers
yusukebe
1
300
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Building an army of robots
kneath
302
43k
The Invisible Side of Design
smashingmag
298
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Being A Developer After 40
akosma
87
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Happy Clients
brianwarren
98
6.7k
BBQ
matthewcrist
85
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
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