Zod Makes TypeScript Even Better

Подписаться 1,6 млн

Просмотров 154 тыс.

50% 1

Zod is amazing. It is not only an incredible validation library, but the direct interactions it has with TypeScript make it event better. Not having to define my types twice is a game changer and the simple yet powerful API of Zod is so nice. In this video I talk about what Zod is, show examples of how to use Zod, and talk about why it is so amazing.
🌎 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:28 - What Is ZOD?
05:12 - ZOD Demo
#Zod #WDS #TypeScript

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 300

@hunterbertoson156 Год назад

I would love to see a full tutorial on Zod! Also, an overview on your thoughts of the T3 stack.

@arno.claude Год назад

I second this

@zapfska7390 Год назад

I third the t3 stack

@athulgeorge6744 Год назад

I 4th the T3 stack

@nisargbhatt300 Год назад

I 6th this with Async validation with Zod (like unique username).

@alexchang6367 Год назад

i 7th love to see this

@papadavis47 Год назад

Well done, Kyle. I have heard of zod, but I have not used it yet. I appreciate this concise video of what it is. A full tutorial with a React Typescript project would be great. Thanks for your work!

@codeNameMoose907 Год назад

Awesome! I never heard of Zod! But more importantly... hope you feel much better soon Kyle! Your followers will be here waiting; we won't ever leave you. Thanks for everything you do! Sending you and yours super healthy and happy healing vibes, Buddy! 😊

@remccs16 Год назад

This is great, thank you Kyle! I would most certainly watch a full tutorial on Zod!

@MrSwingbop Год назад

Full Tutorial is always welcome :D Thanks for all the precious tips!

@abdirahmann Год назад

OMG OMG OMG OMG please do a full tutorial on this one, this is going to simplify my data validation logic on my node server, i also just migrated everything to ts yesterday, how awesome, also, i checked out express-validator and i didn't like how it did validation using middlewares and stuff soo this is a GOD send. Thanks GOD and thanks to you too for letting us know. love ya :)

@boian-inavov Год назад

I love how Zod has picked up popularity lately. I’ve been using it it for a while and it’s been amazing! You just forget about the cumbersome validation part and focus on building your business logic. Also the way it’ll give you a ready made object in the way you’d been expecting it is just god sent! Glad that more people are covering it 👏

@BinaryReader Год назад

Zod is no different to Yup, in fact, Zod is basically a clone of Yup with better static typing. Also, Zod is incredibly slow. Compare it to industry standard validators and it's like 300x slower to validate anything. You shouldn't be using Zod on the server side (it's that bad) The hype around Zod is real, but that doesn't make it good. It's just social media marketing and online influencers pushing it.

@johnychinese Год назад

Yep Kyle, We want a full tutorial, I love how you simplify these things but still show how valuable and powerful they are

@fotoflo Год назад

Thank you for this great video! Wanted to note that Zod also offers a little bit of API around error messages as well.

@jayliu5432 Год назад

Showing the form use case for Zod was super helpful. I finally get it!

@samuelwittlinger7790 Год назад

Looks pretty good, personally I created a validator based on Joi which returns the object you are validating typecasted as the object type your validation schema is describing, which is a little more convenient than having to call infer every time.

@arunavabanerjee6103 Год назад

Hey Kyle, thanks for the video, zod seems super cool and I'd really like if could make a tutorial on it

@johnjohn7023 Год назад

i was waiting for this. thank you so much!!! We want full tutorial!

@mikehill1114 Год назад

I'm glad you said "comments below." I'm a full stack developer, but it wasn't until just now that I figured out where the RU-vid comments were located ;)

@tsioryfitiavanaanhykrishna6992 Год назад

Aw longtime no see, I'm glad that u reach 1M sub ! Thanks for all your tutorials and keep up the good works !

@eschwinvanloon7826 Год назад

Hey Kyle, Thank you for this video, i'd love to see a full tutorial on Zod!

@souvlaki42 Год назад

Very cool library. I really like the idea of a tutorial about it.

@arryaz051 Год назад

Great tool, I use it a lot in NodeJS HTTP APIs to validate requests to the server and get the TypeScript type too.

@vsabhishek1 Год назад

Thank you, you are awesome👌 in explaining new concepts👏👏. Yes i would love to see you cover a full tutorial on zod using typescript.👍👍

@akashsinha5148 Год назад

That would be wonderful 👍 please do a full tutorial. As your tutorials are small and feature packed.

@ElliottTheUnicorn 10 месяцев назад

thanks for the brief explanation. exactly what i was looking for 👍

@sohanbafna2282 Год назад

I am using NestJs heavily for most of my codebase I define DTO's and nest js frameworks helps me to validate each of objects/types for request I make. In that case i would not need this Before that we have been using JSON schema validators where we define schema and validate the DTO's But now zod is permutation and combination of all - like even loash functions are wrapped, this is super useful and must give a try Thanks for quick overview

@oleksandrluchytskyi6867 Год назад

Yes, please a video with most common recipes will be good to have 🤩

@anthonyribeiro3918 Год назад

I would love to see full tutorial too, your didatics is very good!

@LasgCe Год назад

I remember watching the video 2 days ago and thinking, why would I ever need this .. Well, today I needed to create a very complex form validation and I gotta say, Zod is doing a great job so far

@shivamsahil3660 Год назад

Hmm this seems more of a form validation library rather than improvement on typescript. Thanks a lot Kyle ❤️

@mind_of_a_darkhorse Год назад

I am intrigued! So, please make a tutorial on this game-changing way of doing things!

@aram5642 Год назад

Zod in a plain vanilla JS/TS project is definitely a win. No question about it. Would be interesting so see a video on how it integrates with framework like Angular and its built-in form validators.

@anatolydyatlov963 Год назад

Yep, I've been using it for the past few months and it's a must-have for schemaless dbs.

@blockstarter4745 Год назад

Always great content chief (Y) . . . Keep it up

@RandomActsOfWil Год назад

FULL TUTORIAL PLEASE!!!!! You are awesome!!!!

@nmanikiran Год назад

would love to see a full tutorial on Zod! And also please compare with Joi, ajv, zod

@BinaryReader Год назад

Comparing Zod to Ajv would be embarrassing....for Zod >_>

@allirey6196 Год назад

it's very interesting not just for frontend form validation but also for backend API validation

@sujoydutta920 Год назад

That would be really great to have a tutorial on Zod

@adisonmasih Год назад

We really need a full tutorial! 🔥

@NewHellz- Год назад

hey there, may i ask something ?? Is there possible if to create progress bar, with numered inside can change automatically with the date i want to??

@jawadshaikh1745 Год назад

definitely would love to have a full tut on Zod

@_the_one_1 Год назад

You must be kidding! I was just trying to get deep with Zod and you posted a video! Great timing, thanks. I believe "everyone" would LOVE a full tutorial about Zod and why not... typing APIs both with static typing and validating the actual response

@morticie333 Год назад

Great, please do the complex tutorial! I am looking forward! :)

@twd2 Год назад

thanks ,Kyle a full tutorial would be greate 😍

@zhenglaowang8489 Год назад

I can't get over how clean your hair looks.

@bouwensr Год назад

Love a full tutorial especially with a form generated out of json data and field required based on a ‘complete switch’

@jtnovellis Год назад

Yeah. I’d love to watch the full tutorial!

@tonyg_nerd Год назад

Kyle, thanks for this. I'm tooling up for projects with React, MUI, Redux, and have been looking into Formik which validates (primarily) with Yup. I'm not loving the Formik/Yup side, so it'll be nice to give Zod a spin, especially since it's TS-first, as am I. As someone else noted, my primary questions will be about custom rules, field/field comparisons, and async/sync server validations. Zod MUST perform here or I need to go with an established standard.

@tonyg_nerd Год назад

Looks like Zod is the winner with Hook Forms.

@focusroom_ Год назад

Great! want to learn more about this

@Jorge78712 Год назад

Great intro to zod thanks!

@dhaivathlal4870 Год назад

I'm about to do my first typescript form validation without any framework hence no framework provided form validation methods. This video just dropped right on time

@ReconNite Год назад

The problem I ran into with zod was that, not only was it super slow compared to other validators it was also very limiting as to what could be checked, or what could be coerced from one value to another. Although I still use it on some projects, I started to move over to superstruct for my more recent projects as it allows me to define custom refinements/coercions/types with little trouble. Of course this means that you lose the "built-in" or modular aspect of zod, superstruct makes it a lot easier for targeted validation.

@BinaryReader Год назад

Try TypeBox, it's based on industry standards and it's also 300x faster than Zod.

@josecongo9453 Год назад

Please do a full Tuturial. I have a question, with zod do I still need create Interface(TS) for static checking? How can I reuse zod in multiple component(I thinking i react component). Thank you

@vizunaldth Год назад

Kyle - full tut like you did on prisma would be nice to watch

@jimchapman4579 Год назад

Yes! Full tutorial please.

@martinpenev6750 Год назад

Hi Kyle Thx for showing us Zod, I really think it’s supercool! I was wondering: Which validation library have you been using before Zod?

@pomprocks Год назад

You should show it with the same validation messages that your if/else validation has. Often certain messages need to be used, not just whatever messages your validation library produces.

@DillonRedding Год назад

Super cool! This is like Joi, but specifically for TypeScript.

@FamilyGuyVids11 Год назад

Great stuff. ill try it out

@MDFAYIZTP Год назад

Yup vs Zod , add a comparison in next video ❤ we are waiting

@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 .

@daminipandey6490 Год назад

@@victor_productions Siuuuuuuuuu

@nomadshiba Год назад

cool, i had made something similar years ago it was returning correct type after parse also but this is more solid and better than my ancient prototype thingy of course defiantly will use it!

@DiegoBM Год назад

Is it ok to gather then, that this would be runtime TypeScript that automatically generates the compile time types for you?

@avneet12284 Год назад

Cool. Full tutorial would be great

@diegomiyt Год назад

Can i use zod to 'autommaper' ( like automapper from c# ) for convert one type to another? (Ex: IUserResponse from api to IUserState to use in React )

@nickurchin9579 Год назад

At 1:25 ish I paused to read that Introduction off their site and once I read "The goal is to eliminate duplicative type declarations." - it clicked. As I'm on the tail end of the "learning" process, I hate getting comfortable with something (typescript in this case) only for a new/hot library to come along and improve it, because it also means I have yet another damn thing to learn before I feel ready to apply. However, I've actually recently run into that exact issue where I've had to declare the same type in two different places and it just felt gross, but I couldn't see a way around it; now we have Zod and that's awesome.

@nickurchin9579 Год назад

@@kishirisu1268 Shhhh, Typescript can hear you. You're real too, Typescript, we promise (don't worry, it won't resolve).

@saimrgondal2360 4 месяца назад

I'd like a video comparing this with other form validation libs such as Joi. I;ve used Joi in the past and Im really curious to see if zod offers better usability. Thanks. Love your videos.

@avinashmahananda8717 Год назад

Would love to see a full zod tutorial.

@j946atFIVEFOUR88AA Год назад

Would be cool to see you have a talk with Theo and his T3 stack 🙂

@paolocatalano2885 Год назад

Hey Kyle! Please make a full tutorial of Zod including also Zorm (React form with Zod). Thank you!

@SpaceGravy 10 месяцев назад

A comparison with yup would be appreciated!

@0xSLN Год назад

great! full tutorial plz!!

@ColinRichardson Год назад

The problem I found with Zod is the transforms. It starts to blur the edges between validating and parsing. But my manager found a good library (I don't remember it's name for the top of my head) which uses the TS types and makes it a type validator at compile time, rather than runtime, using vite plugins. It seems like a better suit for us as we already have the types setup, rather than using Zod to Infer the types.

@HienLuongOfficial Год назад

can you share what library you are using ?

@rand0mtv660 Год назад

Yeah Zod is cool, but it also kinda depends what you are doing IMO. If you use Zod to validate endpoints that you create with tRPC, then it seems to be great. If you use it for validating forms on frontend with react-hook-form, then yup might just be slightly better. That's at least from my personal experience comparing these two. yup also has a nice Typescript experience and the infer type from schema like the z.infer you shown here. Zod isn't the first schema validation library to utilize Typescript, but it seems people act like it is :)

@MultiPoiu Год назад

Erf, i'm sticking to AJV when doing api-first design and reusable component, because jsonSchema, even if it is a bit more tedious, it is reusable in all language, and can serve as first class API doc with swagger (jsonSchema are almost 100% compatible to swagger) And DTO with annotation are more readable for other stuff, I then use class-validator

@nikhilverma4976 Год назад

Makes sense. JSON portability FTW

@iapplethis Год назад

how is it different than other schema validations? just cuz of the infer?

@paschalokafor9043 8 месяцев назад

Can I use Zod in place of Yup when using formik?

@kirrttiraj 8 месяцев назад

I am struggling to validate an image that I am taking from the user. Can someone help

@arian5126 Год назад

Great, exactly what I needed in the right time for a React project but for someone who's worked with Angular FormBuilder (which is a built-in module), you'd know how Angular is underrated.

@AmanSingh-px5if Год назад

and exactly why react is so popular, not every project will need all the built in modules or even of the type that are baked in.

@arian5126 Год назад

@@AmanSingh-px5if you don't have to use all built-in modules. The compiler removes unused modules from the bundle.

@oswaldosoto4500 Год назад

would be nice have a zod tutorial for advanced user/passwords forms.

@FatahChan Год назад

Great video as always, can you make a video about PWA

@wolraikoc Год назад

How does it differ from joi apart from the ts integration?

@dhawalparmar7117 Год назад

Can I use with pure javascript or in express js

@chidimbamalu3490 Год назад

Good Video. Make a video on Zod like you did on Prisma

@Zeee530 Год назад

In my previous project I used typescript, formik and yup for validation but Zod looks far more easier and manageable, I'll appreciate a full tutorial

@danhphamthanh197 Год назад

I don't think so, Formik still make the form validate way more robust and manageble. Or maybe we can try Formik + Zod :D

@MrFelipefsf Год назад

Thanks Kyle, I would like to watch a tutorial with NodeJs data validation

@odisclemons9700 Год назад

If you truly love Zod then KNEEL before Zod. Note: I'm 100% sure no one on the internet thought to make that exact same joke

@dephc0n1 Год назад

Do you suggest using a query selector on MUI Typography? I see you're using it here.

@genc_emekli Год назад

Hello. please do a full tutorial. I have already started to use zod. Many thanks.

@naezy316 Год назад

Waiting for the full tutorial !!!

@mrcookie97 Год назад

It can check if integer too that's quite nice

@ivanjezakonful Год назад

Full tutorial would be awesome

@Dwafford01 Год назад

I would also love to see a full tutorial on it

@nomiscph Год назад

In angular they have forms with full typescript support 🎉 for everyone working with angular

@dansker5 Год назад

zod reminds me a whole lot of joi. Are there any benefit to using zod over joi or vice versa?

@phill13able Год назад

How are you able to make TypeScript to run in the browser???

@harshgautam3586 Год назад

can you make a complete typescript REST api tutorial video. Love your content btw.

@andemohit Год назад

Does it have image file validation?

@olegsbk3562 Год назад

The zod is very interesting, but how do you validate a conditional rendering of the required field in object on it? So far it doesn't work well

@nabinsaud4688 Год назад

Yes Bring the zod validation video

@ganeshborade3706 Год назад

Hi I need to convert my html&css animation to mp4 video with 60 fps 1080 p and transparent video and I don't know anything about javascript, node.js , javascript libraries please could you make a detailed video on this topic? Your help will be highly appreciated. Because I don't know anything about coding, please make step by step guide. I only know css and html and I already created animation I just need to convert it to video.

@anuragpal02 Год назад

Zod is insane, I used it for API response validation, great features.

@SeraphicRav Год назад

What about sinclair/Typebox? It is 5 times more downloaded than Zod people are talking about, 2 times more than Joi that I am using but lack type inferring.