Lesson Description
The "Schema Validation with Zod" Lesson is part of the full, React and TypeScript, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Steve explains how relying solely on TypeScript's type safety can lead to unexpected issues when dealing with data from outside sources. He demonstrates the using Zod to create schemas that help verify the type of incoming data, ensuring a more robust and reliable codebase.
Transcript from the "Schema Validation with Zod" Lesson
[00:00:00]
>> Steve Kinney: Here's the next problem. You don't know that that API that you don't control actually gave you a post. That's coming from outside your codebase, so you will never know. Right? Let me tell you about a bug that has affected me at various points in my life for the last decade, and has made me a very paranoid, paranoid person, which is, and the problem with this is that it's really hard to pin the blame on anyone.
[00:00:32]
I have, for reasons I don't totally understand, have through many jobs now, worked at companies where the backend is written in the Go programming language. It's not anything bad to say about Go, but one nice part about JavaScript is that it has built-in support for the JavaScript Object Notation. Because they're just JavaScript objects. Go doesn't necessarily, like, you know, support JSON and like a lot of like backend service or gRPC and then they use some library to turn that into a JSON API for me.
[00:01:11]
And many times I've been bitten by just like, not even a person did this, like sometimes a library, sometimes a person, where like, if there was no value. It used to be an empty array. And then whatever library they were using to like generate the API for me, decided in one version bump that now that's actually going to be null. Right, and every like dot map and forEach you had starts blowing up all over your codebase, because you didn't even deploy that week.
[00:01:45]
Like somebody upgraded a library, and now some endpoint is something totally different. And in this case, my code and all the TypeScript would be very convinced that this is a post, because we said it's a post, and it did say that this is now a post. My code is quote unquote type safe, and anything that I import and use is type safe. The problem is, I'm receiving things from the outside world, right?
[00:02:16]
And TypeScript can only help me at runtime. I mean, TypeScript can only help me at compile time, right? At runtime when my code's off and like, you know, on a Lambda somewhere, or what have you, or on a CDN in Vercel, who knows. Whatever happens happens, right? And so all this type safety is great until you touch the outside world. And then you better hope that everything is the way you think it is, or you can check to see that it is.
[00:02:54]
And you could do this very manually. You can do like if Array.isArray and not null, it's really an object, but null is technically an object in JavaScript, so good luck with that one. And you can write these like long things. What I would pitch to you instead is to use some kind of validation library. There are many of them out there. There is Valibot. There's one called Yup. Let's get the best one.
[00:03:25]
The one I'm going to like pitch to you is called Zod, and Zod, I only pitched to you because like a lot of the like OpenAI and like Claude and Anthropic SDKs also support using Zod schemas, so it seems to be like the one that is like the most widely supported, so why not? The other ones, it doesn't really matter, you can write your own, it's fine. But like the Zod schemas are pretty cool, which is a way to at runtime determine that something is the type that you think it is, right?
[00:03:59]
And so we can kind of just create these Zod schemas and be like, hey, untrusted thing from the outside world, do you match this schema? And if it passes, then we know it is of that type, and then we're good. If not, we can either throw an error and catch it and deal with it, because like, we're going to get an error no matter what at some point. Or we can, you know, do a conditional and have some kind of graceful fallback, or there's a few things in between.
[00:04:29]
And, you know, right, making a Zod schema is not unlike making a type, and so we could say something like, let's say post schema. And if we want to see what a post is, it's got an ID that's a number, a title, a string, and a body. Also notice I just command clicked on it and I got to see the definition. I didn't even have to remember or go looking for it. And that's cool. And then in VS Code, if you hit Control on a Mac, hyphen, you can go back to where you were.
[00:05:09]
So that's fine. So I can say post schema is a z.object. Right, nope, that's import Zod. Object, and I'm going to say that it has an ID that is, that was a number, right? We'll say that it's got a title that is a z.string. And we will say that it is, what was the other one? Body. Z.string in this case as well.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops