Lesson Description

The "Validating JSON Schemas" Lesson is part of the full, Fullstack TypeScript, v2 (feat. Zod) course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the challenges of using JSON schemas. One technique includes creating a Zod schema and converting it to JSON. This lesson also includes a demonstration using the satisfies keyword to ensure a schema matches an existing type.

Preview
Close

Transcript from the "Validating JSON Schemas" Lesson

[00:00:00]
>> Steve Kinney: What did we just do? We walked, again, there are a lot more methods aside. I think that we're probably at our capacity for walking through method by method. But the important part is now we have at least one very important tool for enforcing that type safety wherever we are, especially if you're in the case where it's a node back end and your client-side app, you can share these schemas in the same place.

[00:00:24]
Now you can both parse the request body with the same thing doing the form validation. For the response coming back from the API, you can make sure when it came out of the database, that it is what it should be before you send it as the response. And then when it gets the browser, use the same schema to make sure that it is the thing you think it is, and even if you didn't share the types, Zod is going to infer the types for you, you can do that z.infer.

[00:00:49]
But also they will be of that type, you will get all the auto complete, you will get all the IntelliSense. You can use these same things all over the place, so you can validate the things are what you think they are on the server side. You can validate that things are what you think they are on the client site.

[00:01:04]
You can validate it before and after it goes in and out of the database, right? Before you write it to the file system if you're saving JSON files, or using Mongo or something like that, right? You can use the same schemas literally everywhere, either if you didn't even share the types, you can go ahead and infer the types out of it.

[00:01:22]
And, like I said before, when we looked at the Zod documentation before, right, obviously Zod itself is a set of it's JavaScript, right, so it's not easy to serialize, right? And just put into a JSON file. But you know what is, I don't know why I'm live scrolling in front of y'all a JSON schema is just a JavaScript object.

[00:01:50]
So you could in either a shared repo, or, honestly, you could host it somewhere or in either the server repo or the client repo turn your Zod schemas into JSON schema. And just have a file you can pull down and get those types on both the client, and the server, and the data layer, right?

[00:02:10]
You can just serialize them into a JSON schema object. You can either turn back into Zod or what have you. We'll also kind of do this with swagger docs later as well. And so, now we have the first piece of our toolkit for giving ourselves type safety across our entire stack, which is the ability to kind of enforce the same schemas and same types wherever JavaScript is sold, right?

[00:02:33]
Obviously, if you're using other languages, the Zod stuff won't work, but if you serialize it down to the JSON schema, then you will go ahead and have the ability to turn that into Go, Python, Ruby, what have you. The other thing that I promised to answer, which is what happens if you start out with the type.

[00:02:55]
And I opened that page earlier, so let's say I had the type, and I'm trying to write a Zod schema that matches that type. There might be a better way to do it, this is my trick that I think that I invented, unclear if I actually invited it, or if other people use it, or if there's a better way to do it.

[00:03:16]
But this is what I do, which is, you can write the schema and then you can say satisfies with modern versions of Typescript, I think Typescript 5 and later, 4? I don't know, when satisfies came out. But in any version of Typescript in the last four years or something like that, you should be aware you can say, hey, and it satisfies and you have to use this Zod type, that type.

[00:03:42]
You'll get a red squiggly lines of sadness if you don't match it, let me prove that to you.
>> Steve Kinney: Did I not copy the test? I gotta copy all the things. You gotta copy and paste from your own notes, you gotta do it all. All right, so right now it's good, it works, if for some reason, I don't know, I added or let's change this to be a string.

[00:04:10]
>> Steve Kinney: Right now the typescript won't compile. So you can be confident that whatever schema you came up, again, cuz if we don't trust the types that we wrote on a fetch, we shouldn't trust it for making our schemas either. But at this point, Typescript and Zod will work together to ensure that you did the good thing and you did the right thing.

[00:04:27]
And so, that's how I do it when I have the types, but I don't have the schemas, right? Cuz the schemas are useful even if you're never generating types on it, cuz I can now say, hey, did I get the thing back from the API that I thought I was supposed to get, right?

[00:04:40]
Did I, or if it's going to be one or two different things, you can use that safe parse, right? And have a conditional, right? And then cast it that way as well and be like, this could be one of three different things, I'll use schemas a lot of times, I won't use the try catch version.

[00:04:55]
I'll use the safe parse version to say, if is this thing, if is that thing, and so on and so forth. So it's super useful for that as well. So a lot of times, I'll make schemas reverse engineered from types I already have and trust because I want to use it.

[00:05:10]
Cuz I don't wanna write those like gnarly type guards that you saw earlier, right? Cuz [LAUGH] my code base is open source, you can find my sins. There are some egregious ones that I have done. And yes, I did in the year 2021, and I have not refactored them yet, I will do it, I promise you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now