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
Keep alive your typescript definitions using Zod
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Luca Del Puppo
January 16, 2023
Programming
170
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Keep alive your typescript definitions using Zod
Luca Del Puppo
January 16, 2023
More Decks by Luca Del Puppo
See All by Luca Del Puppo
Aware dependencies using Nx Graph
puppo
0
100
Prisma the ORM that node was waiting for
puppo
0
140
How to scale up your projects like a pro
puppo
0
160
Alive, Tipi Sopravvisuti
puppo
0
150
ReactDay 2022 - Unit testing
puppo
0
150
How to scale up your angular projects like a pro
puppo
0
220
Prisma in the Air
puppo
0
500
Can typescript definitions survive even at runtime?
puppo
0
170
Is it possible to build your UI components using only web components?
puppo
0
130
Other Decks in Programming
See All in Programming
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
tomokon
0
480
CodeRabbitの効果検証と過ごしてみた3ヶ月
armondando
0
220
R8 の設定見直しでアプリサイズ削減
andpad
0
200
Kubernetes祭り #2 OP/ED
bells17
0
110
contenteditable と日本語入力に向き合う
colorful12
0
190
ソニーのクラウド共通基盤の変遷とAI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
kenjiyoneyama
0
250
最近”作らせてる” ローカルAIアプリの話
akit37
0
440
When benchmarks go bad - what I learned from measuring performance wrong
hollycummins
0
200
Workers Cache を知る
syumai
0
350
phperだってパンチカードでコーディングしたい
o0h
PRO
0
270
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
gam0022
0
350
Vue Fes Japan 2026 タイムテーブル徹底解説
448jp
1
650
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.8k
Between Models and Reality
mayunak
4
490
Prompt Engineering for Job Search
mfonobong
0
500
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
480
Rails Girls Zürich Keynote
gr2m
96
14k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
300
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
Designing for Timeless Needs
cassininazir
1
520
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
300
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
630
Google's AI Overviews - The New Search
badams
0
1.6k
Transcript
Keep alive your typescript definitions using Zod Luca Del Puppo
Who I am Luca Del Puppo (aka Puppo)
Full-Stack Developer @ Flowing a Claranet Company and Microsoft MVP @puppo92 https://www.linkedin.com/in/lucadelpuppo/
[email protected]
Typescript journey 1
10 years ago
The developers reaction
interface CustomerModel { id: number; name: string; email: string; phone:
string; } Interfaces
type CustomerModel = { id: number; name: string; email: string;
phone: string; }; Types
HTTP Request
But after a while…
➔ Typescript enables type check but on BUILT - TIME
➔ After the build all your types disappears ➔ After the build all your considerations about types dissolve Why?
Prevent ugly mistakes 2
Zod is your super hero
import { z } from ‘zod’; const CustomerSchema = z.object({
id: z.number(), name: z.string(), email: z.string(), phone: z.string(), }); Schema
import { TypeOf } from ‘zod'; type CustomerModel = TypeOf<typeof
CustomerSchema>; Convert to type
const res = CustomerSchema.parse({ id: 1, name: 'John Doe', email:
'
[email protected]
', phone: '555-555-5555' }); Parse method
➔ Parse throws an Error ➔ ZodError is the right
error to check ➔ ZodError contains all the issues that describe the errors Something wrong?
Do you hate exceptions? use safeParse
safeParse Success ➔ success: true ➔ data: Output Error ➔
success: false ➔ error: ZodError
Benefits of using Zod
Create a layer between your app and the outside V
a l i d a t i o n HTTP socket.io
Demo 3
Conclusion 4
➔ Typescript is awesome, but it’s good only on built
time ➔ Create a validation layer between your app and the outside • Prevent execution of code with wrong data • You can get notifications if something is changed ➔ Using Zod, you can guarantee your types, both built-time and run-time Conclusion
CODE SLIDE
Thanks! That’s All! Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/
[email protected]