Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Types in Real Life
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sibelius Seraphini
July 13, 2018
Technology
330
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Types in Real Life
Practical approve to types in javascript
Sibelius Seraphini
July 13, 2018
Transcript
37 slides
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
More Decks by Sibelius Seraphini
See All by Sibelius Seraphini
Por que criar uma nova Fintech?
sibelius
1
76
As Dores de uma Fintech
sibelius
1
330
Woovi - Safe Coding Practices
sibelius
1
99
⛔ No Cloud: how Woovi moved from the Cloud to its own servers
sibelius
1
810
React Colocation
sibelius
2
350
The Frontend Dichotomy
sibelius
5
770
React Native Bridges Architectures
sibelius
2
1.4k
What's next?
sibelius
3
680
ReactConfBR - Is Relay Modern the Future?
sibelius
3
990
Other Decks in Technology
See All in Technology
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
150
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
140
ラクスル会社紹介資料|エンジニア向け / RAKSUL Introduction for Engineers
raksulrecruiting
0
110
Context Ontology Accelerator 入門 (業務データの意味を、AI エージェントに渡す)
inariku
PRO
3
680
あの日、見つかっていなかったらどうなっていたか
kazzpapa3
2
210
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
inariku
PRO
3
190
Gemma4 Hands-on at Nagoya
tsho
0
100
AWS基盤改善を支える 私たちの理念と行動指針
kentosuzuki
0
220
速くなった開発の効果をどう推し量るのか
bulbulpaul
0
110
Datadog の権限統制 〜Org 統合に向けて調べた注意点 / JDDUG-Meetup_24
visional_engineering_and_design
1
140
Quick Automate | 目指せ Quick マスター 12
inariku
PRO
1
110
Frontier Teams — Amazon は AI で「開発のやり方」をどう変えたのか
kmotohas
0
250
Featured
See All Featured
A Tale of Four Properties
chriscoyier
163
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.7k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
830
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
50
10k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.4k
Code Reviewing Like a Champion
maltzj
529
40k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
2
400
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
880
Building Applications with DynamoDB
mza
96
7.3k
Un-Boring Meetings
codingconduct
0
500
Reality Check: Gamification 10 Years Later
codingconduct
0
2.4k
Thoughts on Productivity
jonyablonski
76
5.5k