Learn Zod In 30 Minutes

Zod is an amazing validation library that focuses on type safety and ease of use. I love Zod and feel that it makes TypeScript even better. It also makes working with user data incredibly easy and in this video I will show you everything you need to know about Zod.
📚 Materials/References:
What Is Zod Video: • Zod Makes TypeScript E...
JavaScript Map Video: • Another 5 Must Know Ja...
JavaScript Map Article: blog.webdevsimplified.com/202...
JavaScript Set Video: • Another 5 Must Know Ja...
JavaScript Set Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:33 - What is Zod?
01:15 - Basic usage
05:03 - Basic types
07:00 - Basic validation
13:25 - Object type
16:52 - Array type
18:02 - Tuple types
20:00 - Union type
21:58 - Record type
23:37 - Map type
24:55 - Set type
25:35 - Promise type
26:40 - Advanced validation
27:55 - Error handling
#Zod #WDS #TypeScript

Пікірлер: 160

  • @dtesta
    @dtesta4 ай бұрын

    Dude! I watch A LOT of tutorials and this one was VERY good! No slow pace lingering or repetitions. Straight to the point and good, solid explanations. Very good job! Kudos!

  • @d.sherman8563
    @d.sherman8563 Жыл бұрын

    I see a bunch of questions asking why you would need this when typescript already provides you with compile time type safety. Zod provides you with runtime type safety and is primarily for validating things you don’t control such as API input and form input validation. You already must validate these so having a library that lets you define your schema’s declaratively and derive your DTO types is awesome. It also lets you share the exact same validation logic between Frontend and backend by using same schema. Deriving new schema’s and their types from existing ones also really helps reduce validation logic and types you have to write. In many cases for example, the update schema will just be a partial create schema with added required if etc, which is like 2 lines of extra code with Zod for new schema and types. Your errors are also strongly typed.

  • @lord_kh4n

    @lord_kh4n

    Жыл бұрын

    Some people also validate API response, is it really good to also runtime validate API response on The Frontend?

  • @CuongVu-yy4cg
    @CuongVu-yy4cg Жыл бұрын

    Please post more typescript content. I really love it, thank you Kyle

  • @judemusyoki7052
    @judemusyoki7052 Жыл бұрын

    Honestly Kyle the way your content has advanced my career, just wanted to say thanks 🙏🏾

  • @robtangled8816
    @robtangled8816 Жыл бұрын

    Kyle, this video was great. I would love to see an example of using Zod with and ODM like Mongoose. Maybe a short or 5' video.

  • @acollierr17
    @acollierr17 Жыл бұрын

    Kyle, thanks for this video! I only know of Zod by name and have seen examples of it being used in code. But after this crash course, I can see why it's praised! I look forward to implementing this library in future projects of mine.

  • @a7u412

    @a7u412

    Жыл бұрын

    hi anthony, I spotted you here

  • @w2ytube
    @w2ytube Жыл бұрын

    Thanks Kyle, great vid!! I love this new format. You rock!!

  • @andresantos-ud4ht
    @andresantos-ud4ht Жыл бұрын

    Amazing explanation. Clean and simple. Thanks !!!

  • @peteremad5228
    @peteremad5228 Жыл бұрын

    thanks for this video, Kyle, it put my leg into the library within half an hour

  • @Imjoshnewton
    @Imjoshnewton8 ай бұрын

    After using Zoe minimally as part of tRPC for a while now I started adding it into my forms using React Hook Form. This video was super helpful in creating some more advanced schemas.

  • @_the_one_1
    @_the_one_1 Жыл бұрын

    Thank you so much Kyle, awesome as always!

  • @georgepliskin5199
    @georgepliskin51994 ай бұрын

    Amazing presentation, easy to watch and super useful. Great job!

  • @focusroom_
    @focusroom_ Жыл бұрын

    This is a great tool, thank you for the clean and simple explanation

  • @algo-wave
    @algo-wave Жыл бұрын

    Great tutorial. Was really thinking of giving this Zod a try

  • @robtangled8816
    @robtangled8816 Жыл бұрын

    Thanks a lot, Kyle. Your content means a lot for some of us.

  • @tonyeneh8194
    @tonyeneh8194Ай бұрын

    Thanks a lot Kyle. This helped me fix a bug

  • @user-gm3lg8gp3m
    @user-gm3lg8gp3m4 ай бұрын

    you are amazing at explaining topics! it is insane

  • @fvbixn
    @fvbixn Жыл бұрын

    Thanks for the video! I really love Zod and I’m using it in recent projects, together with tRPC. Great to see all the abilities it has.

  • @ozzyfromspace
    @ozzyfromspace14 күн бұрын

    exquisite crash course, Kyle! I've been in python-land way too long and started to forget things lol

  • @pablocoronel784
    @pablocoronel784 Жыл бұрын

    Hi Kyle, thanks for your dedication. I'm learning a lot of best practises thx to you. Im struggling a lot with the proper way to handle form validations with react. If you could explain how you consider the best way I would really appreciate.

  • @wchorski

    @wchorski

    Жыл бұрын

    look into using Formik

  • @nymusicman

    @nymusicman

    Жыл бұрын

    If I may throw in another suggestion, react-hook-form is awesome!

  • @gmjitendra
    @gmjitendra2 ай бұрын

    Excellent . thank you.

  • @YOUdudex
    @YOUdudex Жыл бұрын

    amazing video, thanks!

  • @mohlalathato7078
    @mohlalathato70789 ай бұрын

    This video is straight amazing.

  • @kompiuterizmas
    @kompiuterizmas Жыл бұрын

    Thank you for, as always, great video. But I would like to ask for additional information about how to make password field and repeated password field comparison using Zod. If it is possible.

  • @taylorkoepp3048
    @taylorkoepp3048 Жыл бұрын

    Outstanding content.

  • @geforcesong
    @geforcesong Жыл бұрын

    great tutorial, thanks

  • @bugignat
    @bugignat Жыл бұрын

    great tutorial!

  • @daleryanaldover6545
    @daleryanaldover6545 Жыл бұрын

    Tried Zod yesterday and I am glad that I don't need Typescript for it to run.

  • @daminipandey6490
    @daminipandey6490 Жыл бұрын

    Hey. I'm just curious to know if it's possible to chain multiple regex expressions for the same input field and display different error messages .

  • @Hades200082
    @Hades200082 Жыл бұрын

    One use-case I've not been able to figure out... how do you get a Zod schema for an existing TypeScript type? For example, if you're using a third party pacakage/library and you want one of your types to have a property that is of a type declared in that package?

  • @tesla1772
    @tesla1772 Жыл бұрын

    today i literally started with zod for my express backend and here you come with an video💯💯

  • @TypeScriptTV
    @TypeScriptTV10 ай бұрын

    Do you have a recipe on how to validate type aliases using Zod? Instead of "z.string()" I would like to use my existing string type alias if possible. Any help would be appreciated! 🙏 Best, Benny

  • @EngineerNick
    @EngineerNick Жыл бұрын

    Thankyou awesome video I'll be using this immediately! :) Small error at 23:31 Object keys are always stored as strings in javascript. If you made the change you mention there actually would not be a parse error. Try console.log(z.record(z.string(), z.number()).safeParse({1:3})) --> { success: true, data: {1:3} } Only the Map and set types support other types as keys. I was super disappointed when recently discovering this, but luckily this was after Map and Set became available. I am still confused why typescript allows you to give Record anything other than string as first parameter. Maybe they were expecting a change to the standard?

  • @testaccount9420
    @testaccount94209 ай бұрын

    ❤ thanks for the video

  • @petter9078
    @petter9078 Жыл бұрын

    Could someone share typical use cases for using Zod? I was thinking about maybe mapping response data? Im pretty new to typescript still and have done a little zod programming. Would be nice to know.

  • @psyferinc.3573
    @psyferinc.35738 ай бұрын

    thank you for the video

  • @rishiraj2548
    @rishiraj2548 Жыл бұрын

    Excellent 🎉

  • @billkolarik9423
    @billkolarik9423 Жыл бұрын

    I'm curious is it possible to use the UserSchema as a map when fetching SQL data with the same name fields? I have experience doing this in C# but creating classes instead of objects.

  • @olg3089
    @olg308929 күн бұрын

    Cool stuff bro

  • @akashm1240
    @akashm1240 Жыл бұрын

    Hi kyle, big fan. Sometimes with your videos being long I feel like I won't be able to complete it. How about breaking the video into a playlist. That would really help me a lot. Thanks

  • @emmanuelbonke7374
    @emmanuelbonke7374 Жыл бұрын

    Hello Kyle, great content. Just a concern... From the way you defined and explained sod, seems to be similar to class validator... Can you probably do a video showing the pros and cons of the two... I use class-validator because of validation and most importantly api documentation....

  • @d.sherman8563

    @d.sherman8563

    Жыл бұрын

    It is similar, but takes a functional approach instead of OO. I think the strongest advantage it has is the ability to derive new validation schemas and their types from existing ones. All Zod methods are immutable so you can reuse existing schemas however you like. Say for example you have a UserSchema which has all fields mandatory including an id field. You can with just a few lines of code derive the validators and types for a CreateUserDTO schema by using UserSchema.omit({ id: true }), and an UpdateUserDTO schema with UserSchema.optional().required({id: true}) You also get strongly typed errors that are specific for the schema.

  • @emmanuelbonke7374

    @emmanuelbonke7374

    Жыл бұрын

    @@d.sherman8563 Noted... Thanks for the clarification....

  • @ffaadigital1473
    @ffaadigital14737 ай бұрын

    great video

  • @mohammedabusada7513
    @mohammedabusada7513 Жыл бұрын

    Hey Kyle, can you share the Notion notes page with us, thanks.

  • @TheGaneshshow
    @TheGaneshshow5 ай бұрын

    Thanks a lot bruh:)

  • @joel-rg8xm
    @joel-rg8xm2 ай бұрын

    Any video on Valibot ? (ZOD's half bumdle size competition)

  • @mikeonthebox
    @mikeonthebox Жыл бұрын

    Vite is only to get TS working? But if you don't have Vite you can't do _import { z ] from "zod";_ right?

  • @TakeOnMe5
    @TakeOnMe5 Жыл бұрын

    Looks like Yup but with better TS support and slightly more flexible I guess. I hope Formik will support Zod directly, without any adapters, just like Yup.

  • @zlackbiro
    @zlackbiro Жыл бұрын

    I work for one industry company and we use Zod everywhere. Super awesome, easy to use... Simply, you cannot resist using it once you try it. Even more, you can use it in react, vanilla js, aor eany odther js framework/library. I validate my forms on the frontend side when i do post requests. You can even validate reponses. Very powerful and awesome library!

  • @petter9078

    @petter9078

    Жыл бұрын

    Hey! Very cool. Care to share some typical use cases? You mentioned validate responses? Im struggling to understand whether zod is mostly used server side or client side. I initially thought it would be used to validate some request made by a client to the server. Some security stuff(?) i might be talking nonsense here.

  • @binrueiyang2197
    @binrueiyang21979 ай бұрын

    Thanks!

  • @WebDevSimplified

    @WebDevSimplified

    6 ай бұрын

    You're welcome!

  • @maid768
    @maid768 Жыл бұрын

    Question: can‘t you just create a userModel for your user and then do „const user: userModel = {…} Because it will also check if you used the correct model properties and throw error if your value datatype doesn‘t match property datatype

  • @d.sherman8563

    @d.sherman8563

    Жыл бұрын

    This will work for object literals defined in your code. Zod is great for things like form validation, api input validation etc where you are not in control of what you’re validating.

  • @FaramarzF.R
    @FaramarzF.R3 ай бұрын

    سپاس

  • @celsomomade
    @celsomomade9 ай бұрын

    Hi. Can I just replace all my types(interface and type) with zod????

  • @andrewtran7948
    @andrewtran79485 ай бұрын

    Is there support to switch this Zod schema over to Mongoose?

  • @CTILET
    @CTILET Жыл бұрын

    How to began type on typescript if you dong like javascript?

  • @DiogoLScarmagnani
    @DiogoLScarmagnani3 ай бұрын

    I'm learning Zod and it is a very useful lib. I only miss an option to have rules for specific indexes (when z.array) or properties (when z.object). If someone knows how to make it, please share it with me, I'd appreciate it very much.

  • @Yunafan2963
    @Yunafan2963 Жыл бұрын

    I like how the symbol from the thumbnail is from Clark

  • @metinsut
    @metinsut Жыл бұрын

    Perfect

  • @GeorgeDonnelly
    @GeorgeDonnelly4 ай бұрын

    This is like the thriller movie of tech tutorials.

  • @satellitesage2487
    @satellitesage24874 ай бұрын

    Great video, but I think it could have been made more structured so that we don't have to go back and forth between versions. It could have been better if the flow of the video does not include deleting all of the operators that was just discussed, in this way, it could have provided a better overview, and it would be easy to sum everything up. Nonetheless, learned a lot from this video!

  • @ThulasiRaman-po8lv
    @ThulasiRaman-po8lv Жыл бұрын

    Hi Tutorial very awesome🙂 To Make React Redux Series. to helpful for latest Technology that's one

  • @minadivlogs4790
    @minadivlogs4790 Жыл бұрын

    Hi Kyle, I want to have a challenge on the frontend. I have around 10 years of experience. I have been watching your videos.

  • @vitalysuper3193
    @vitalysuper31937 ай бұрын

    I do not care what validator to use as long as it have auto-generator tool. thats why i love json schema it became a standard and there are many tools for it

  • @LarsRyeJeppesen
    @LarsRyeJeppesen Жыл бұрын

    What if you ALREADY have a type/interface defined?

  • @abhiram6087
    @abhiram6087 Жыл бұрын

    Make a video on React lifecycle.

  • @AbdulSamad-kn3ot
    @AbdulSamad-kn3ot Жыл бұрын

    Kyle, Please use the dark theme in chrome devtools, white color hurts

  • @WilliamShrek
    @WilliamShrek Жыл бұрын

    Time to add Zod to my app.

  • @gobicorner
    @gobicorner Жыл бұрын

    can zob be used for React-native ? or just for browsers ??

  • @YasinAkimura

    @YasinAkimura

    Жыл бұрын

    As it's purely JS based it should work for react native too because react native runs on JavaScript first which will interact with native Modules

  • @user-id3wi8ti8h
    @user-id3wi8ti8h11 ай бұрын

    cool video

  • @Xe054
    @Xe054 Жыл бұрын

    Zod feels well designed and easy to use even without completely understanding TypeScript. Can we use Zod instead of Mongoose? And would that even be a good idea?

  • @DarkzarichV2

    @DarkzarichV2

    Жыл бұрын

    Mongoose and Zod have different goals and different use cases. First of all, Mongoose is an ODM and used to access documents in db using object oriented paradigm while Zod is a schema validation tool. While Mongoose can do schema validation it's not its main thing and Zod can't do absolutely the most of things Mongoose does so they're pretty much not interchangeable.

  • @Xe054

    @Xe054

    Жыл бұрын

    @@DarkzarichV2 Thank you. I left out the part where using Prisma + Zod (from the t3 stack) could probably replace Mongo + Mongoose for a fullstack project. I like the documentation from the former tools and not so much from the latter tools. Good docs matter a lot to me.

  • @DarkzarichV2

    @DarkzarichV2

    Жыл бұрын

    @@Xe054 ah, this you definitely can. Not sure if Prisma support of MongoDB got any better or still preview but generally yes, Prisma will provide you type-safety and runtime validation while Zod will validate user input

  • @dhanush_gh
    @dhanush_gh Жыл бұрын

    Thank you 😊

  • @bryson2662
    @bryson2662 Жыл бұрын

    I love zod and this is a great video. I would recommend just staying away from TS enums btw. Also at the 13 mark you label the enums array as const and that's fine but personally for readability I would just say something like . const hobbies = z.enum(["hobby1", ....].

  • @vella166
    @vella166 Жыл бұрын

    Nice , Useful and Simplified video as usual,🔥

  • @vinayjangra1401
    @vinayjangra14013 ай бұрын

  • @whitek6532
    @whitek6532 Жыл бұрын

    have you used typia ? its 10000x faster than zod

  • @gojamoja6719
    @gojamoja671911 ай бұрын

    cool

  • @andrews8733
    @andrews8733 Жыл бұрын

    Where is this being utilized mostly? Seems like it might be useful in writing DSLs or some api middleware.

  • @d.sherman8563

    @d.sherman8563

    Жыл бұрын

    Form validation and API input validation.

  • @rishiraj2548
    @rishiraj2548 Жыл бұрын

    👍👍💯 Thanks

  • @Arciiix
    @Arciiix Жыл бұрын

    I mean wow, I've just started using it yesterday and now your video comes out... a coincidence or fate?

  • @graficandorealidades7561
    @graficandorealidades7561 Жыл бұрын

    Hobby: ["Programming", "Weight Lifting", "Guitar] My man.

  • @llgmusic
    @llgmusic Жыл бұрын

    This library seems really useful in conjunction with typescript. Thanks

  • @nothiiiiiiiing
    @nothiiiiiiiing11 ай бұрын

    i can finally write pythonic ts

  • @VtTraves
    @VtTraves Жыл бұрын

    At 17:00 lets say we have array of friends. only if it was true.

  • @AmericanDragon134
    @AmericanDragon134 Жыл бұрын

    Kyle are you know Vue ?

  • @changNoi1337
    @changNoi1337 Жыл бұрын

    The logo looks like the first xtc I ever took ;)

  • @liveNews672
    @liveNews672 Жыл бұрын

    Bro i have doubt, i am trying to convert image into html code using react.js but resources available, is there any way please help.

  • @juandavidruedamartinez1278
    @juandavidruedamartinez1278 Жыл бұрын

    love u😍

  • @amjadcp4509
    @amjadcp4509 Жыл бұрын

    #off topic : express or fastify

  • @barygold9175
    @barygold9175 Жыл бұрын

    I have a Request, please. I would like to see a video that constructs a simple GUI using GO on Windows. Thank You.

  • @spacecore2077
    @spacecore20774 ай бұрын

    I never knew Stefan from Vampire Diaries was into Web Dev ...

  • @SeanCassiere
    @SeanCassiere Жыл бұрын

    With v3.20, there's a new .coerce pipe that's available, where you can attempt to coerce a value's data-type into something else. This could be useful where if you have an HTML form with a number input and you need to validation min/max. Using the .coerce pipe you can coerce the default input type of String into a Number and then validate it. It would look like this. z.object({ // at input (ie. evt.target.value) will be string since basically everything from an HTML input is string. count: z.coerce.number().min(18).max(200) });

  • @deadlydiminuendo2161
    @deadlydiminuendo2161 Жыл бұрын

    Looks like Yup

  • @Stealther11
    @Stealther11 Жыл бұрын

    "Kneel before Zod!" -General Zod from 90's superman movie or something.

  • @HaaniJaber
    @HaaniJaber Жыл бұрын

    Vercel until you get DDOS'd, not necessarily because it's cheaper, but other platforms have better tools to manage DDOS

  • @CW91
    @CW91 Жыл бұрын

    Great video. But the few seconds at the end was cut before you said "...have a great day"

  • @jgoemat
    @jgoemat Жыл бұрын

    Yes, Javascript/Typescript is all about more code

  • @zongxun7118
    @zongxun7118 Жыл бұрын

    Whats the difference between zod and yup

  • @WilliamShrek
    @WilliamShrek Жыл бұрын

    girls: Oh my! Kyle winked at me.

  • @spiritbass15920
    @spiritbass15920 Жыл бұрын

    const as const this is a const one more const for good measure const

  • @MizManFryingP
    @MizManFryingP Жыл бұрын

    Really reminds me of JOI

  • @kamehameha22
    @kamehameha22 Жыл бұрын

    zod is god