Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

[00:00] Writing Zot! Schemas manually could be tedious and time-consuming and for this reason we can automate the process. Here we've got the example booking JSON file so let's copy the content of it and let's open an application at the app.quicktype.io. QuickType is a package that allows us to generate interfaces or classes for various different languages basing on what our JSON is. So what we're going to do right now is to create an empty JSON.

[00:33] Let's call it for instance data. We can write over here that this is going to be let's say age that is going to include I don't know 50. And let's say that this is our person schema. What we can see is that automatically the corresponding JSON schema as well as the TypeScript type is being generated. So let's paste our booking.

[00:58] So let's also define that this is called a booking. And what we get here is the room type, due date, number of guests, price etc. Everything is being generated. The difference is that we don't have the specific property utility such as the minimum and maximum for a number and we don't have also the positive for the price since there is no way for the mechanism to figure this out. However, this is still way faster than typing this manually.

[01:30] So if you have existing APIs this is the quick way to generate your Zod Schemas, at least generate the initial versions. So one option is to go to app.quicktype.io. The alternative is to install IDE extensions such as this paste JSON as code used within VS Code. So what we can do is to open the example booking. Now let's run the quick type command in the bar and what we can see here is to open QuickType for TypeScript and here we can see the example booking schema, the same one that we have seen within the web application.

[02:14] So let's say that for some reason you want a different language and that would be QuickType and setTargetLanguage and for instance TypeScript so we would have an interface of a TypeScript JSON. So we would have an interface representing the example booking. By the way, this name is being generated automatically from the file name. And as you can see for QuickType we have quite a bunch of different languages over here. So That's the second possibility.

[02:47] So the web application, the IDE VS Code extension. And finally, we can install the packages locally. So let's run npm install QuickType and QuickType-Core. So let's install these packages. And I have already prepared the packet.json scripts over here.

[03:11] So here there is a QuickType lang TypeScript zod and the source is essentially example booking JSON file so as you can see this command is pretty straightforward. So what we're going to do right now is to run the npm run quick type and what we're going to see essentially is the dot schema so most probably this would be the desired one since this can be automated using the continuous integration tools. And finally if you wanted to have even more control over what's going on here then we can take a look at the QuickType generate. So we are not going to go through all this code that has been generated. This is based on the QuickType documentation.

[03:57] So essentially this file is Generating a code which is yet going to generate a validator over here So let's run this one. So we're running TS node and here we're running the quick type Generate file. So what it's going to generate is the QuickType generator file. So let's take a look what has been generated. QuickType generator file.

[04:24] So this has been again automatically generated. So what has been created here is the TypeScript interface, the one that we have seen before, and there is a convert class. So we can create our own script that is going to use the two. So let's walk into the final file QuickType TS. So what we're going to do here is to import from the newly generated file.

[04:50] So this is what is going to potentially change basing on what the JSON content is. But this file over here is going to remain the same which you would push into your repository. And finally, there is the interface that we want to use. So what we could do is basically try to convert, let's say we want to convert to room booking, or we can convert a room booking back to JSON. So both ways, Let's say that, and by the way, this one is expected to be a stringified JSON.

[05:22] So this would be an empty one, so this is an empty object. Let's run this file, so that would be ts-node and here the QuickType file. So we will see that this is going to fail essentially because our example booking, our booking schema expects for certain properties with their corresponding types. And here, this one is basically empty. So what is returning over here, what it's throwing actually is invalid value for key room type on room booking.

[05:52] Expected string got undefined. So again it's the same thing. So now what we can do is to comment this one out and we're going to rely on the JSON that we can basically load from our disk over here. So this is going to be the example booking.json file. So we know that Since the conversion has been generated from this file this has to work.

[06:20] And finally we are going to stringify this JSON so this is going to be JSON.stringify from what we have just loaded from the file. And finally we're going to copy this conversion and we can also assign it into the result because this is supposed to create the thing. Now if there is anything going wrong then this was basically throw an error. So if the script continues then we are sure that this is the correct shape, this is the correct object. Now convert to room booking and finally we just put the stringified version over here.

[07:00] So let's see if this works, let's rerun the script. The output is empty, as we can basically see it is a success, so we can also do a Console log with what is the result and we are going to yet see what is the output over here. And what is interesting is that the due date, it used to be basically a string, but due to what QuickType automatically and by default has generated is that since that matched a date string format, it has been moved in to become a date object. So that's one thing and there is also another possibility that we could basically extend our object to be something bigger. So let's say if we provided a something totally, totally different and I have just pasted a very, very, very big object over here then we can generally do the very same and this is going to run the QuickType Generate.

[08:02] We will see that our QuickType generated file is going to be way bigger and so we can run our QuickType TS file to see that everything is correct. Whether this is a single and small flat object or whether this is a nested object this quick type thing can cover either simple data structures or really complex ones