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
Types in Real Life
Search
Sibelius Seraphini
July 13, 2018
Technology
3
280
Types in Real Life
Practical approve to types in javascript
Sibelius Seraphini
July 13, 2018
Tweet
Share
More Decks by Sibelius Seraphini
See All by Sibelius Seraphini
Woovi - Safe Coding Practices
sibelius
0
40
⛔ No Cloud: how Woovi moved from the Cloud to its own servers
sibelius
0
680
React Colocation
sibelius
1
280
The Frontend Dichotomy
sibelius
4
710
React Native Bridges Architectures
sibelius
1
1.3k
What's next?
sibelius
2
640
ReactConfBR - Is Relay Modern the Future?
sibelius
2
890
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
240
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
200
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
テストを軸にした生き残り術
kworkdev
PRO
0
220
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Become a Pro
speakerdeck
PRO
29
5.5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Language of Interfaces
destraynor
161
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Transcript
Types in Real Life How to improve your dev workflow
Sibelius Seraphini
Sibelius Seraphini @sibelius @sseraphini 2
- Motivation - Basics - Sum types - Generics -
REST api study case - React - Redux - Utilities Outline 3
Type System in JS 4
- Less bugs - More maintainability - Type Driven Development
Motivation 5
- Better tools support - Code completion - Refactor -
Documentation - Jump to definition Motivation 6
- Types are set of values - string - 'a'
| 'b' | 'c' | ... - number - 1 | 2 | 3 | ... - boolean - true | false - function - string -> boolean | ... - object - { a: string, b: number } | ... What are Types? 7
Typing a variable 8
Typing a function 9
Typing an object 10
Nominal Typing 11 - C++, Java, Swift
Structural Typing 12 - OCaml, Haskell, Elm
Typing an array 13
Sum/Union Type 14
Intersection Type 15
- How to type a function that can be used
for any type of array (int[], string[], number[])? Generics 16
Generics 17
18 Optional type
- type the input - api body payload - headers
- query string Typing a REST API 19
- type the output (response) - Get a json output
of a REST api - Transform json to types - https://transform.now.sh/json-to-flo w-types/ Typing a REST API 20
Typing a REST api 21
Typing a REST api 22
Typing a React Component 23
Typing a React Component (TS) 24
Typing a React Component 25
Typing a HOC 26
Typing Redux 27
Typing Redux 28
Typing Redux 29
Flow Type Utilities 30
TypeScript Utilities Mapped Types 31
TypeScript Utilities Conditional Typing 32
Resources 33 - https://github.com/entria/guidelines/tree/ master/flow - https://flow.org/en/docs/lang/ - https://www.typescriptlang.org/docs/ho me.html
- https://github.com/fantasyland/fantasy-l and - https://github.com/gcanti/flow-static-land
Resources 34 - https://medium.com/javascript-scene/m aster-the-javascript-interview-what-is-fu nctional-programming-7f218c68b3a0 - https://medium.com/@matthiasak/state- of-the-union-js-d664bdbffd14 -
https://mitpress.mit.edu/books/types-an d-programming-languages - https://github.com/niieani/typescript-vs-fl owtype
Resources 35 - https://transform.now.sh/json-to-flow-typ es/
I didn't mention 36 - More about Type Theory -
Functional Programming - Types + Functional - Fantasy Land specs - Realworld problems and solutions
Sibelius