Zod Schema Validation and Type Generation

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD.

Welcome to syntax on this Monday. Hasty treat. We're gonna be talking about Zod and what it is, how it uses a scheme of validation and type generation to make your life easier when working with data. It. But more most importantly, why anyone would even use something like XOD? What is its place, and why are you starting to see it pop up everywhere nowadays? It's one of those projects that has been it. Catching a little bit of hype for what it is, and it's a really neat project at the end of the day, for something it's as it's it. As neat of a project as you could have around day data validation as as one exists. So, we'll be talking about all that and more in this episode. My name is Scott Tillinski. I'm a developer from Denver, Colorado. And with me as always is Wes Bos.

Hey, everybody. Excited to be here. Excited to talk about Zod. I know. It's one of those names you gotta kinda say like that. West did like a whole face when he said Zod.

John Phil come across in the recording, but you did, like, a really good Exod.

Like, kinda face. Yeah. This episode is also sponsored by 2 amazing companies, Linode and LogRocket.

Both of these companies actually could kinda fit in into data validation, right, if you think about it. If you're building a service, maybe you're building, like, a a data API or something like that, you could always host on Linode. And just like that, with LogRocket, Perhaps you have some data issues. You're having some bugs pop up because your data isn't parsed correctly, or perhaps you're trying to parse your data and it's failing that validation step. Perhaps you're you're trying to pass some data in there, and it's causing a bug or error on your site. And you know what? Zod can actually throw errors from data validation issues. So Maybe perhaps you're seeing that error pop up in your site, and it's popping up in your LogRocket.

Now what is LogRocket? It's a video session replay that gives you access to it. Not only just seeing how your users are using your stuff, but it also gives you access to solving bugs really easily. So let's say you had your Zod Validation error throw. It throws and perhaps your, your LogRocket is there to catch and see that error happening, And then you can go ahead and investigate this. And because Zod gives really good errors, you could see that error in the console or, the network tab or wherever you're consuming that error. Either way, Log Rocket's got your back because you can use a scribble video replay to see how that error is affecting your users.

So head on over to logrocket.comforward/syntax.

Sign up and get 14 days for free. Let's talk about Linode as well. Linode is cloud computing developers Trust. I'm gonna talk about one thing that I love about Linode, and that is the fact that you can just sign up and get a Linux box, And you can run whatever you want on that box. And that includes running as many things as you want on those that box. There's obviously there's obviously limits to the resources, but See, I think with a lot of lot of services that make you pay per application that you're running on, it. That can get expensive really quickly, especially if you just have lots of fun little projects and you just wanna throw them all into 1 single box. With Leno, you can sign up, you get access to Linux box, you could throw a docker on there, and then you could run node in docker. You can run multiple instances or you can just run multiple thing. I personally use something called PM 2, on Linux servers to run multiple applications all at once. You can use Nginx, so you can put domain names on each of them. It's awesome. You wanna check it out. Linode.comforward/syntax.

It's gonna get you one a $100 in free credit.

Thank you, Linode, for sponsoring.

$100.

You know I know I was trying to it. Trying to do away without actually insinuating that Linode would give you $1,000,000 because they won't.

I was actually just looking up the other day, Wes or when I say the other day, I mean yesterday, on how to, spin up a Minecraft server on Linode because I wanted to I wanted to put my Minecraft server that I have locally. I wanted to put it on the Internet so that, you know, perhaps

Other people we need to talk about that because my so my, sister's kid what do you call sister's kid? I'm an uncle. He's my nephew. He's your nephew. My sister's kid. He's my nephew, and, he keeps messaging me, being like, I need, like, this in Minecraft. And my kids Kids are starting to play Minecraft as well, but I don't totally get it all. But he's like, you know how to run a server. And I was like, yeah, I know how to run a server. Like, what do you need? And he he said, like, something how there's, like, creative mode and

in play mode. He was been asking me a whole bunch of questions, but I wanna I'd be able to figure that stuff out so I can get we can run our own server. Oh, yeah. I mean, at the end of the day, the Java based version of Minecraft is just a Java app, and you can Run it in a server and have it be available. People can, log in. You can set up all kinds of administrative privileges. And, when you have your own server like that, you can control all sorts of kinds of things, whether that be, like, rules around that server or or rollbacks or Different plugins or extras that you're adding on to it because the game has this just massive.

Like, I mean, you know how big the game is, but the game has a massive it. Customize and mod community around it. It is just like I I was on this site looking at mods for it, and I was just like, There's just this whole world. The I mean, I I've been playing Minecraft since, like, 2011, and it still shocks me at, like man, it's it's Amazing. The types of infrastructure built around this thing. It's it's very, truly wild.

Yeah. Maybe we need an entire show on this. I think it's It'd be kind of interesting. I also just juiced up my, local sir server, so I've got all kinds of, I put some more RAM in it. It went from 4 to 16 gigs. I need to do that now.

I'm waiting for Black Friday, I think, and I'll I'll jump on that train. Good call. Before we get into that, I did wanna Actually, you know, just talking really quickly about that Minecraft thing reminded me of, Travis Nielsen who's doing the design for our site. He's been on Syntax before. He was it. Telling me that his son is really into Scratch, the language.

Yeah. And his son is, like, 9 years old, and he is getting into online scratch competitions that are just, like, happening in scratch forums, and it just reminded me of, like, the old web in such a wonderful way where people are just it. They're they're trying out their their kids doing, like, little drops and remixes of each other's little scratch programs, and he, like, made a little scratch program that was just like a motion graphic to welcome us when we visited them, and it was just like, man, this is such a cool little world. There's so many cool little pockets of the Internet of people doing fun stuff and sharing it and just, like, really embracing that old school style of the web.

Love that. Love that. That's really cool. Yep. Okay. Sorry. Let's get back on track. Back on track to talk about Zod. Now, Zod, what is Zod? Why might you use it? Where can you find out more about it? What's the use case here? Zod@zod.dev.

Zod is a project that at its base base level doesn't necessarily sound super exciting when you when you think about it. It Is TypeScript 1st schema validation with static type inference, which means that you define your schema And then you infer your types from that schema. So if you're the type of person who is defining a schema Or you're defining you the shape of your data, and then you're also having to define your types. Like in the past, we've had to do this in our API to say, alright. Let's hand write the types of what this actually is because maybe the types for our database are different than the types that are coming out of our API. Maybe they're different in these sort of ways or maybe this shape of data is something that we have to kind of duplicate its functionality.

But With Zod, you just write your schema and then you use a little bit of, magic to say z dot infer, and then you have the flat brackets type of, and then you pass in the schema.

And it literally spits out the TypeScript types Down to anything you could possibly want to happen there there, whether it's required or it's enums or any of that sort of stuff. It just kind of works.

So, basically, if you need a schema to define the shape of your data, Zod does a really good job of that.

So That's really what it comes down to. There's a lot of these other libraries, and and I'll talk a little bit about maybe the comparisons between some of them. Zod has a really good page for that. But if you need to define the shape of your data, this is a good tool. So like I said, type inference is is a really, really great feature of this thing. The fact that you don't have to define the shape of your data twice, you can just define the shape of your data and Automatically get your TypeScript types out of that is a really useful feature to have. And especially because

if you are doing any sort of API and you're bringing data in from the client, you are very likely have to validate That data and you have some sort of validation library in there. You build your validations to go ahead and do it. So what I'm understanding that this is is that You basically you have to write your validations anyway. So write those first, and then they are

generated. I'm using quotes here because they're Technically inferred, meaning that they are just they are inferred. That's the they're they're return. You could think of it as like CS. A function is going off and then getting the tights even yeah. Exactly.

And so that is from what I'm understanding is that's A kind of a validation first. You you define your data. This is a string. This is a string that has to start with a t.

This is a number this is a number between 6 and 7, has to be an email address. And then,

from that data, you can infer the TypeScript types, Which are extremely helpful in the rest of your application when you're working with data. Correct? Correct. And there's some neat stuff in here. Now they get quite a bit into the whole parsing versus validating, which If we're being entirely honest, it's a bit over my head as, like, just the type of person who typically works with this stuff, but there's some interesting reading on their docs page. It. It it handles the error handling if you wanted to do hard errors, if the data doesn't fit correctly. Right? If you're trying to parse the data and it's not Matching your schema, like, how do you handle that? Do you throw an error? Do you continue? Do you do, like, a soft and and fill in kind of default data? Like, what what do you do If the data isn't matching the shape correctly, there's also, like, a a neat feature that seems like it's, like, not That novel, but at the end of the day is, like, a really nice feature to have is that your type is required by default. So as in, you know, with TypeScript, If you type something, that type is required by default. You say Scott is a type of string.

You have it. To do extra work to say that this is possibly undefined or possibly no. Right? But many validation libraries are the exact opposite. Opposite. Yeah. Yeah. Where you have to specifically say that this thing is required.

Well, with Zod, you have to explicitly state if something is optional.

And while it's a small little thing, it matches the way you think in TypeScript to the point where when you're working with Xod, if you are experienced in TypeScript at all, Even though the the syntax you're writing this stuff in is slightly different, it matches 1 to 1 exactly how you think about TypeScript types when you're developing your schemas for the data that you're working with.

So that's like a nice thing.

In in Sometimes, you know, when I first looked at Zod, I I have to admit it turned me off a little bit because in others schema based libraries that I've used in the past, You do something like very similar to, like, what you would have in TypeScript, or you'd use, like, magic strings to say, like, name is a type of A string of the word string. Right? Yeah. Where with Zod, you have to import z. And it seems like it's extra work to say name is a type of z dot string and string as a method on z. You're like, this feels like I'm just doing an extra step. But at the end of the day, it's what allows Zod to work the way it does.

And it ends up honestly feeling very nice because, anytime you get into kind of, if you've worked it all with schemas, you'll know that many times, schemas can have some additional information. It's required. Here's the default value.

Here's our army. It's optional. Here's the default value.

You know, it's this or that.

And your schema Ends up then looking a little bit more complex. You get an object with a bunch of extra properties in it. What's the type? What's this, that? And with this, you end up just kind of chaining methods upon each other to say it's a dot string, dot optional, whatever. And it reads so much better when you have a complex schema that I found, Working with it practically to be very nice. So, you know, all this said, why would you use it? Well, we're using it to And I'll talk a little bit more about this in a second. We're using it to literally define our schema.

We use that same schema definition to validate our data it. At the database level, so our Mongo uses it as a JSON validator.

So the database itself will block additions if that doesn't fit the data. So We are able to, out of 1 schema, get database validation.

We're able to get our types, and those types are able to be passed it from not only the client side, but the server side. So my whole application uses 1 type definition for one thing, and that's passed Everywhere, whether that's coming in or out of the database, that's using its server side, that's using its client side, and the only single source of truth on that thing is the Zod schema. And that's pretty magical, I gotta say. So

I I let's confirm this database thing. I just want to ask you a question because that was my Question is, can you also use this for your database? So you create your XOD, you can generate those to TypeScript, but then you can also export it JSON.

So you're MongoDB.

Do you have a MongoDB schema as well, or is that somehow based off of this? It's based off of it. So MongoDB I don't know if you know this, Wes, but there Mongo has a validation baked in. So many people use Mongoose. Right? But, MongoDB has a JSON validation that you can define at the database level. So instead of defining that in your code, it's defined at the database level. Therefore, you don't have to have, like, a, schema in all of your different applications anywhere that's accessing this data is going to be beholden to the same validation rules because it's, it. Literally saved to the database. So Okay. I what I do is I take my Zod schema, and then I run it through The function that is part of the community. We'll talk a little bit about this in a second, but I run it through a function called zod to JSON schema.

JSON schema is what MongoDB uses. However, the the version of this plug in is a newer version of JSON schema. So then I kinda had to adapt another function that just tweaks it just a little bit to make it happy to remove some of the modern Keywords that the the, newer version of JSON schema uses, but it's a strength of XOD. And maybe we can talk about this now before we get into maybe the comparisons, it. Is that there is this big ecosystem of third party plug ins. So you have things like API libraries. Like, tRPC can use XOD to do all of its validation, And then you can share that data shape again.

You there's a express as a API, XOD endpoints, XOD Nest JS. So you have, like, API connections to this thing. There's a lot of, like, form integrations.

I wrote my own. My auto form library that I wrote it. Takes my Zod schema and spits out a form. I mean, that's just my own custom thing, but there's React form, React hook form, which you can pass in the Zod EMA, and it will it will give you a form and to validate your form. Yeah.

Validation error. Zod Formic adapter. You know how many people are using Formic? You can get, it. You know, your validation's directly tied to Zod using that Zod formic. There's even React Zorm, Which is a form using Zad, which is a great name as well. There's a lot of different things. You know, I mentioned Zad to JSON schema, but there's also Zad to t s, Zod, open API, Zod, fast check.

Man, there's so many of these different ones. Fastify, Nest JS GraphQL Zod generates Nest GraphQL model classes from Zod's schemas.

Although, this is mocking library. So if you want to generate fake data for your tests based on your Zod schema, that's super handy.

I see. So it sort of just ripples through your whole application.

I love that. Yeah. Single source of truth. Yeah. Yeah.

Zod, beautiful.

Slank.

The other thing that I'm curious about, and I think I know the answer to this, is if you Have a validation.

No, I think that's right. The one thing we've talked about is TypeScript doesn't do specific validations. If you want to have a type that is only 5 characters or you want to have something that is a phone number or Something that starts with a t.

TypeScript doesn't do that. It doesn't have validation built into it. If the only valid and whenever I say this, people say, well, you can List every possible option. I was like, Yeah, you're not going to make a union of every possible phone number in the world. You know, you could.

I figured out what the limit was at one point. It's a lot.

Oh my God. But

so this is kind of nice because If you do need the validation in your application, you don't obviously, you're obviously not relying on TypeScript for that type of thing because that's compile time. You use this at runtime.

Yeah. And it's a small library. You know, there's a lot of, like, really great extra little tools in here like, Key of extend, merge, pick, omit, partial, d partial, required, pass through, strict, strip, catch all. Like, there's a lot of, like, great little helpers inside of Zod. And I've I haven't necessarily found a, like, time where I'm like, man, this thing just doesn't do what I wanted to do right now.

So I'm definitely in the honeymoon phase of Zod where I'm like, this this thing rules. I'm, all hail Zod. I'm a big Zod fan right now. But, you know, we'll see. It has a massive amount of users, which was a bit surprising to me because It was only a few shows ago when we saw uses Zod, and then we looked at how many people were using Zod, and we're like, what is this? What is this? Yeah. And next thing you know, it's it's in my code base. So, it's one of those tools that you might not get at first why you might use this thing, but it's fun To at least have in your toolbox. The last thing I wanted to talk about in this episode was they did some comparisons between other like libraries. So If you're using one of these other libraries, I I do just a quick run through of some of these comparisons because I think it is it it's helpful in understanding a little bit about Zod's strengths.

So, Joy is one of the libraries that people have been using from Happy JS.

J o I is is the library. I've used Joy in the past. Yeah. Yep. So the the big difference here is that Joy doesn't use static type inference.

So you that type inference is not something you get in Joy. So that means you have to write your types As well as your validations.

Correct. Yeah. Yep is another very popular one from jq, jquence.

Yeah. Yep. It's it's definitely pretty widely used. Yep. It's a full featured library that is first implemented in Vanilla and then later real rewritten in TypeScript.

It. It supports, casting and transforms.

All object fields are optional by default. So instead of required by default, it. It's missing object message methods like partial or deep partial. It's missing promise, schemas, function schemas, union, and intersection schemas. Okay.

I o dot or I o t s is, this one has a little bit more, but it's missing promise schemas, missing function schemas, it. None non empty arrays with proper typing object methods again.

So some of these things that seems like XADA is basically what it's done is it's taken, the ideas of all of these other tools and it's like, what if we just did it, With everything, no compromises.

Do it well. And then at the end of the day, ship a library that is, like, it. I said this thing is small.

Let me pop open exactly how small it is. It's, wow.

Check out this number, Wes. It has 1,200,000 downloads a week.

1,200,000 downloads a week.

That those are some wild numbers, don't you think, for a a schema validation library? Like, it still blows my mind. It must be.

It's a part of tRPC.

It's a part of, a bunch of other things. So it's it's, you know, it's not just people straight up using well, it's not a part of tRPC. I'm sorry. It's something that frequently people use with tRPC.

But it it is is a part of a lot of different tools, I think, that people,

Are using and kind of end up using Zod maybe without even knowing it. But Yeah. I bet that I I always go to the dependents a tab on npm and say, like, what is using this? I kind of wish you could you could sort the dependents based on, like, popular

Oh, yeah. Projects.

What's the best? What's the Fire CMS seems to be using it. Astro.

So that's a big one. Oh, yeah. Aster is a big dog. Interesting. One thing that we didn't talk about here is that they also have asynchronous, validations, which is really cool. So If you needed to, like, ping an API to validate data as legit or just check it, call a database to make sure that that user actually exists,

you can do that. I love that idea of it's not just a regex against certain types of strings and numbers. It's you literally can wait for it to go Look something up for you. Yeah. It's it's a funny one of those types of libraries we don't necessarily think of it as being, like, the sexy thing out there, but it, I found it to be super useful and, largely have been super impressed with this thing.

So, yeah, head on over to zod.dev.

They have a Discord.

It's like you type or you get a the I can't stop laughing at the fact that a validation library has, like, a a community behind it and all this stuff. Yeah. It's, it's wild. But it it's a a great library, and I've been a big fan of it so far. And, again, I I think this thing is definitely worth checking out. It's worth having in your toolbox. A lot of people might be looking for this very thing or maybe they're not happy with what they're using, and, maybe Zod's gonna be here to take over. So check it out, zod.dev,

and give it a try. All right. Sweet. Thanks, everybody, for tuning in. We'll catch you on Friday. Wednesday.

You. Face. Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.