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; 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]