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
260
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
550
React Colocation
sibelius
1
240
The Frontend Dichotomy
sibelius
4
680
React Native Bridges Architectures
sibelius
1
1.3k
What's next?
sibelius
2
620
ReactConfBR - Is Relay Modern the Future?
sibelius
2
850
Other Decks in Technology
See All in Technology
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
340
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
490
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
660
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.8k
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
450
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
500
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
300
君も受託系GISエンジニアにならないか
sudataka
2
450
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
270
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
420
Featured
See All Featured
Side Projects
sachag
452
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Language of Interfaces
destraynor
156
24k
Speed Design
sergeychernyshev
27
800
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Into the Great Unknown - MozCon
thekraken
35
1.6k
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