Zod + Generics is HEAVEN

Using Zod as the source of your types is extremely productive. With a couple of simple generics, you can power amazingly powerful abstractions with minimal type annotations.
Become a TypeScript Wizard with Matt's free TypeScript tutorials:
www.totaltypescript.com/tutor...
Follow Matt on Twitter
/ mattpocockuk
0:00 What is Zod?
0:47 Building a form library
2:23 Building a REST API
4:10 Summary

[@erlendryan]

hey, your content is very informative, I think it could be even better if you had smooth transitions to where you add lines of code, since it may be a bit hard to follow when you’re jumping between different lines

[@zombiefacesupreme]

This would easily double the edit time. Just watch it three times in a row like me.

[@brunopanizzi]

@@zombiefacesupreme this would double his edit time but save us 3 times more time, pretty good deal

[@mattpocockuk]

This makes sense! Still figuring this format out. I think the issue is that the _camera_ moves too fast: i.e. the line of code that my editor is on. This means that it gives the impression that it's snapping back and forward too much. Will work on it, thanks for the feedback!

[@mattpocockuk]

For instance, the first bit of code explanation is great until I jump at 0:24, which is disorienting.

[@wlockuz4467]

@@mattpocockuk Do it like Fireship, instead of selecting the code, paste it in and explain what the newly pasted code does.

[@wickedjutto]

One suggestion is to slow it down alittle bit. I don’t mind the fast pace, but as others pointed out, it’s just too hard to follow the code with many camera jumps. Thanks for the content, I’m getting up to speed with typescript and I feel like your content has helped the most.

[@jamesthebald]

I tried watching this at 0.75x speed and it was still too fast! Great stuff though.

[@eternal8lueforever]

This is great information, but its really hard to follow. The pacing is too fast and the jump cuts to different parts of the code make my head spin 😅

[@rishiraj_dhar]

Hey, Matt. Great vid as always! But yeah, it was a little hard to follow with all those sudden transitions and jumps around the code. If those could be a little smoother, this video would be an absolute banger! Really love your videos - they’ve helped me massively improve my own development and understanding of TS. Leaving this comment as a fan of your content who just wants to see you put the best stuff out there.

[@Palundrium]

I think that's good feedback, I definitely find the same. Playback at half speed and having a lightning finger on the pause button is always helpful. 😅 I do like the fast speed as reference though when I come back later after letting it sink in.

[@aleserantes]

Hi! This is hopefuly a constructive critic since I like the channel. This video editing style of removing spaces and silences may work for content such as Fireship's, which are mainly small snippets of info/jokes, but (for me at least) don't work for long code explanation like yours; pauses matter, they give emphasis and structure to speech. Keep up the good work!

[@kamilogorek]

Agree with previous comments that although those videos aim to be as condensed as possible, at this point, it's really hard to focus watching them. With so many jump cuts, it's very hard to keep track where in the codebase you currently are, as eyes need few seconds to figure it out. Maybe you could experiment more with typing instead of copy/pasting, and scrolling, rather than jumping between sections?

[@JulianColeman03]

I can't believe how many videos of yours I've gone through in the last few days because you manage to distill so much information into 4-minute videos. I've been looking for reasons why Zod will solve some problems for us and this has sold me.

[@tomasznocon6378]

Nice timing, Astro 2.0 came out yesterday with one of the biggest new features being Markdown frontmatter validation using Zod.

[@hypergraphic]

Awesome! I've enjoyed zod so far and this is even cooler.

[@TheTmLev]

TypeScript guys are finally moving towards Rust's serde which existed for years and provides more typesafety than TS+zod can ever have.

[@rychardvale]

Hey Mat! Amazing video content, one thing that I could suggest is to zoom-out a little when showing code, I personally find a bit hard to follow when the code is too large like this. Amazing content nonetheless!

[@SimonCoulton]

This is brilliant content, thanks!

[@psyferinc.3573]

ah i really should get over your beginners ts to get a hang of your style. the information is too much and too beautiful for me to be lazy about the basics. thank you a lot for your content man. you really are a wizard

[@rostislavzhuravsky3342]

It is awesome! Thank you very much. I have learned a lot from you

[@andrewlewin6525]

Awesome video, I think this would really do well with a more long form format, but really excellent stuff

[@pupfriend]

Zod is now at the center of a project I've been working on. I use a single schema to validate form inputs, database writes, requests from the browser, and to apply types going back to the browser responding to requests! One question... Zod has a .describe() method that only accepts strings. I've been using it to add data dictionary descriptions so I know the purpose of a particular field in the database. I'd love for it to accept objects so I could add things like: { dictionary: "Address line 1, formInputLabel: "Address 1", formInputId: "address1", formInputPlaceholder: "Enter your address", formInputHelperText: "" } The use case is simply that I could identify a single source for these things as part of the original schema. So, for example, if I have a new user form and and edit user form, and I want to change any of these items, I could change it in one spot and have it update across the forms. At runtime, nothing stops this, but Zod throws type errors in the editor if you add an object into the .describe() method. Any ideas on how this could be extended without updating the core library?

[@barelmishal9668]

To fest transition hard to to keep up and a little bit annoying. That how I feel when watching this video. Love your content because of this give a comment hope that help.

[@AlexFigueiredoo]

Thanks for posting this! I just started using Zod (dropped Yup), and I'm having a hard time with some simple stuff, and your tips are very welcome. I like the videos are short and easy to watch on a quick break, and I understand you're trying to figure out the format to improve your views and channel growth. This is my perception based on your tweets and community posts on YT. I think the pace is a bit too fast on this "blazing fast" series. Maybe you can type the important changes instead of the hard cuts? That would add some breath time to digest everything.

[@yandeu]

Niice was just looking for something like this!

[@mskleftwich]

This is so great. Small bit of feedback: could have used an extra second or two to read each code snippet before you moved to the next thing. I ended up just watching at 0.75 and pausing as needed. Thanks for the great content as always!

[@DanielRios549]

Zod is absolutely amazing, since you start using it, you never want to stop

[@matthewbeardsley7004]

Lol, okay I feel a bit better seeing others not being able to follow along, I'll have to watch this a few times to grasp it...I felt like I had it on 1.5x anyway, I wouldn't change too much, I like all your videos

[@user-be3mg6cm4k]

Help! There are pieces of my mind everywhere, after that bombastic tip.

[@hugodsa89]

Hey Matt, are you trying to do a lot like Fireship? Dont get me wrong his videos are great, but I think your content had a different format which in many ways I found that it suit best your approach. But hey, keep rocking and experimenting if that's whats happening. I am glad and thankful you are doing all this effort in making great content. Cheers

[@eula9]

so happy its not just me that can't follow this, i felt so stupid for not being able to lol. what's the philosophy behind ruthlessly trying to optimize shortening the video length? i got time don't worry

[@MrCrooot]

Don't change a thing, these are amazing.

[@UsernameUsername0000]

Just because you’ve enjoyed the pace doesn’t mean others didn’t struggle a bit. No shame in trying to accommodate feedback.

[@lucasfranzolin]

I'll recommend you for all of my peers!!

[@ufukbakan4741]

You can use 'bootpress' on npm, i coded it for backend with the similar approach but i coded the 'zod part' my own too so it doesnt have dependency to it.

[@saifullahrahman]

oh my god! this is exactly what I was trying to do just now.

[@chrissalgaj4111]

This one felt blazingly too fast. epic stuff though

[@Oussama-uo1gf]

it's so hard to get what's going on with all the sudden transitions. Love the way you explain though, keep up the good work

[@rafields2]

Hey Matt, nice video!! Never used zod before. Do you know fp-ts and io-ts?

[@aungmyatmoemakescodework]

instead of casting as any, we can use return cb(req as Request, res); like this

[@lsagar]

Faster than Flash, informative but I have no idea what went where. Blazing Fast Tips indeed

[@vigscodes]

Can you link to the specific Zod course you were talking about? Is it just the zod exercises on total typescript?

[@andrewblotski8526]

It would be great if you provide a link to the source code as Jack Herrington does

[@somebody656]

I saw something in the zod readme where the generic should for the the schema with extends ZodTypeAny instead of the inferred type from the schema

[@itsmefrancois6825]

Thx again for this informative video but I couldnt keep up. The pure speed and sudden transisions made it really hard to follow.

[@sushantrajbanshi4508]

True, it was quite fast and hard to follow for noob developers like me 😁

[@matheusbaptista8904]

Hi Matt, congratulations on the video! So imagine that my schema is a z.object with 70 properties and I create a type alias from the z.infer of this object, so when I hover over this type vscode won't be able to show me the complete structure of type in your hover tooltip, it will show me something like ... 60 more ... Do you have any suggestions on how I can visually check the structure of the type alias that z.infer would generate for me when I have a schema with many properties?

[@vijayRT]

I ran into this issue yesterday. There's no VScode specific solution, but adding "noErrorTruncation": true under the "compilerOptions" block in the tsconfig.json fixes it for me.

[@mmmike3426]

I like it, but at this pace, a repo to reference at our own speed would be nice (for the express example at least)

[@mkroven]

Happy to see that I am not the only one who feels not smart enough to get it :)

[@noamisaac]

Is there anywhere we can actually access the code you write in the video? I would like to follow with a stable point of reference

[@pinch-of-salt]

Damn had to freeze frame a lot to grasp everything, really informative video btw. It would be great if you could start with some code then try to show how it’s flawed and then fix it.

[@AjinkyaBorade]

Yup !

[@dcvsling]

typescript type check and inference trigger at design time , why trigger that again at " runtime " " with code" ?

[@armantavakoli5314]

when AI evolves to the point where we have archimedes-in-your-pocket, im going to make mine copy your teaching style

[@userfuckeri]

Explain somebody please, what z.Schema does and how it infer type for values in onSubmit func? Thanks

[@SwedeOfEnbound]

Hey Matt! Does your claim in ze title still hold up one year later? 🙏

[@benoitleger-derville6986]

Are all aspects of this video well covered in your course on Zod?

[@ChillAutos]

Let’s say I have a generated type from gql-gen, and we are storing that data elsewhere, what’s the best way to then use zod to verify that the data confirms to that gql generated type? Also have to assume that type can change so it needs to update the zod scheme automatically if it does (ideally)

[@invinciblemode]

You can’t do that. Zod only validates at runtime. At build time the types only work if they are inferred from your Zod schema. What you’ll end up doing is having two sources of types.

[@ChillAutos]

@@invinciblemode thanks for that. I suspected as much.

[@invinciblemode]

@@ChillAutos no prob. Facing the same issue at work. An alternative is to create a custom code generator to produce the Zod schema from gql?

[@ChillAutos]

@@invinciblemode haha you read my mind. I’m already writing a custom script that will be executed after the gql gen to do just that

[@martapfahl940]

is it comparable with pydantic speaking generally?

[@y.m.o6171]

Thank you for this. Can you please please share the final code ?

[@nomadshiba]

you can use `as never` there you never really have to use `as any` for anything. you can just ban `: any` and `as any` from typescript literally, you never need it. if you think that you need `any` as a value type, you either need `unknown` or `never` every time.

[@joostschuur]

I'm just here to point out that the blue color on your wall seems to be in your VS Code theme too.

[@pablom8854]

working with Zod and Prisma has been really hard, not sure if my logic is wrong but Zod + Mongoose was a lot easier. I'm having all sorts of issues with Prisma and models relations, it has been hard and I'm even using a generator to generate the Zod schemas.

[@malipetek]

I could not get it in one go, wow

[@gabrieldacunha4802]

Liked Subscribed

[@Louisi9]

For the form example, I would actually recommend using Formik and Yup. Yup is very similar, but being able to use a form library where you can create forms entirely declaratively is pretty nice. It even does error handling automatically. Really recommend looking at Formik at least. There is an adapter to use Zod with Formik, but cant attest to its reliability.

[@RIP212]

react-hooks-form is better tho. Has Zod adapter for 3 years now or so

[@filippapiernik9737]

I dont recommend using formik, react-hook-form is way better can also use resolves - yup joi etc. Formik is lagging on bigger forms (e.x 8 inputs).

[@somewonderfulguy]

Ugh, feel dumb watching this video. Probably should rewatch it later after dealing with Zod in practice.

[@vtnk7597]

very good video, but you should try to not jump all over the place like you did here 2:40. If possible show the entire script and highlight where you want the viewer to focus.

[@Balance-8]

Where is the zod course?

[@deadman4150]

One challenge with Zod is I can no longer use "Find all references" on properties in VSCode. Anyone know a workaround?

[@lucasprins8895]

🤯

[@peterprog181]

My brain is driving at 300kmh

[@botatoo1733]

plot twist you use Yup instead of zod for a day

[@user-lm5ju8nc2t]

And if you put the code in a gist and attached to the video it would be great and more helpful. Good luck!

[@ofeenee]

The video is directed at high level TS established wizards, making it difficult for me, a baby mage, to follow along and understand the magic that’s going on to fully appreciate it… 😔

[@Wicked-Developer]

You have great content, that's why I subscribed, but I find it difficult to follow the video.

[@GdeVseSvobodnyeNiki]

Fuck zod, all my homies use io-ts!

[@purduetom90]

I slowed this down to 75% playback speed and it was still hard to follow

[@mayankjain6440]

Hey Matt, I like the content, it is very informative but it could be better if pace of the explanation, flow of the code would have been taken care of! Hope you'll consider feedback and will deliver such nice content ahead!

[@mattpocockuk]

Agree! Hopefully my later content is better.

[@thesunabsolute]

Great content. VERY hard to follow with the jump cuts. Just post a normal video where you're typing the code out with the VO. The jump cut thing is not conducive to learning.

[@chrisalexthomas]

Typical british, you're gonna take a cup of tea and chill out ;) nicely done, but grommit? where are the crackers?

[@hundsim]

Why so fast? It takes three times as long to watch due to all needed pausing/rewind 😅

[@nabinsaud4688]

Github link

[@JEsterCW]

Too hard to follow honestly I only understood first half, but the express part i had no idea what was going on xD. I love you and your content, but there's some work to do about the editing etc yet ;D

[@clarkdnro]

Surely you know Rap God by Eminem, you TS God by YOu

[@simonthiboutot8855]

Damn, my head is spinning, too much information too fast haha. Great content though 👌

[@0xlogn]

arktype > zod (disclosure: I'm an ArkType contributor)

[@alexodan]

I love u lol p.s. I NEED A BIGGER LIKE BUTTON

[@Danielo515]

It’s not a validator , it’s a parser.

[@user-gf9ri4wj5h]

I can’t follow up with 0.75speed😂

[@TimothySmithDev]

Matt, I️ love your videos and maybe it’s just me but you seem to move way too fast. I️ can understand your perfectly but I’m constantly pausing and rewinding. Other than that, your awesome. Keep it up!

[@dawid_dahl]

Went too fast for my taste. But thank you for the video!

[@user-kw9cu]

zoom out a little and do not cut in between it so hard to follow

[@WesSouza]

Prediction: Zod will become an official part of TypeScript no later than 2024.

[@johnjohn7023]

this is too fast. my head is spinning now. no joke.

[@ThatRobHuman]

I'm sorry man, I *really* tried, but I feel like this video is like drinking from a firehose, to the point where I couldn't even pause fast enough. and it's *really* hard to follow what is going on. plus, there's not even any kind of code or github repo in the description so one can try to find their own context, which is a shame because the express/zod pattern is *exactly* what I'm hoping to use, and this is not helpful.

[@quintencabo]

The information was great but it was a bit quick. I think if this was a 6 minute video it would have been more useful.

[@edgeeffect]

This one's a bit TOO fast.

[@thefrey9588]

please slow down or just type out the changes you make.

[@warrenlayson2514]

But our senior devs are either too bland or lazy for innovations

[@damianperez7736]

Too fast could understand

[@froxx93]

I know a lot your videos like this are intentionally just scratching the surface of a topic, and are at least partially meant to refer people to your full guides, but I'd still recommend slowing down a little on the info-per-time-ratio. Even for me, who knows most of the things you talked about in this vid, it was pretty hard to follow.

[@reverser41]

Slow down.

[@abhimn7856]

Too fast!

[@crizo23]

Love the content but for me it’s just not consumable. I cannot follow what you’re doing. Too many cuts. Taking too fast. Too many quick transitions. Even pausing, thinking, resuming video doesn’t work for me. Is it just me?

[@CristianPerezRodriguez]

Same thing here, I'm sure he will improve for the next one.

[@CristianPerezRodriguez]

I think it would be much better to make short videos instead of fast ones. You are just "cheating" here because understanding all this would basically require pausing the video several times and that's not fast at all. And would definitely appreciate if you could talk more slowly, not all of us are native English speakers. And no offense but everytime you showed your face it distracted me from the code that I was trying to understand as well. Sorry if the feeback is harsh, I really want your channel to succeed so that's why I'm sharing.

[@handsome_man69]

ughhh.... no thanks. Feels like a whole new layer and the "latest greatest JS library". seems like just adding noise to me.

[@user-lm5ju8nc2t]

Please, make videos slower otherwise they are hard to follow.