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
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
0
180
Is Xcode slowly dying out in 2025?
uetyo
1
180
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
280
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
200
GoのWebAssembly活用パターン紹介
syumai
3
10k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
11
2.8k
XSLTで作るBrainfuck処理系
makki_d
0
210
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Cult of Friendly URLs
andyhume
79
6.4k
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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