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
270
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
⛔ No Cloud: how Woovi moved from the Cloud to its own servers
sibelius
0
660
React Colocation
sibelius
1
260
The Frontend Dichotomy
sibelius
4
710
React Native Bridges Architectures
sibelius
1
1.3k
What's next?
sibelius
2
630
ReactConfBR - Is Relay Modern the Future?
sibelius
2
880
Other Decks in Technology
See All in Technology
三視点LLMによる複数観点レビュー
mhlyc
0
200
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.8k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
860
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
420
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
110
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
450
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
210
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
980
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
1.4k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
640
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
170
Featured
See All Featured
Scaling GitHub
holman
460
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
308
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GitHub's CSS Performance
jonrohan
1031
460k
Being A Developer After 40
akosma
90
590k
Balancing Empowerment & Direction
lara
1
450
Music & Morning Musume
bryan
46
6.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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