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
490
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
wkhtmltopdfの次どうするか問題2026
willnet
2
1.8k
App Intentsのビルドプロセスを支える技術
kntkymt
0
480
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
1
320
Heart of Swift Concurrency
koher
0
1.1k
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
atsuki_seo
0
210
Findy - エンジニア向け会社紹介/Findy Company Deck
findyinc
6
400k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
kinopeee
19
19k
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
riku_sakamoto
0
370
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
rkaga
8
5.2k
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
340
AI Agent時代のリアーキテクチャ戦略と実践
hokaccha
9
5.2k
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
270
Featured
See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
340
Docker and Python
trallard
47
4.2k
How GitHub (no longer) Works
holman
316
150k
Discover your Explorer Soul
emna__ayadi
2
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
340
Claude Code のすすめ
schroneko
67
230k
How to Talk to Developers About Accessibility
jct
2
560
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
510
Navigating Weather and Climate Data
rabernat
0
540
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]