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
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
290
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Catch Up: Go Style Guide Update
andpad
0
250
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.8k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
iOSでSVG画像を扱う
kishikawakatsumi
0
170
What's new in Spring Modulith?
olivergierke
1
170
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Bash Introduction
62gerente
615
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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