DEV Community

Cover image for Supercharge your app with runtime type-checking using ZOD
Diego (Relatable Code)
Diego (Relatable Code)

Posted on • Originally published at on


Supercharge your app with runtime type-checking using ZOD

Type-checking in Javascript applications is becoming more and more normalized with Typescript. However, one common complaint of Typescript is that it doesn’t ensure type-safety in a runtime environment. ZOD can solve these issues, as it offers type-safety checks at runtime, take note that this works in conjunction with Typescript!

As a small disclaimer, this isn’t a diss at Typescript. It’s amazing and makes writing code a lot faster as it instantly reports errors in the IDE, but a little more safety never hurt anyone.

In this article, I’ll quickly go over how to set up ZOD and an example of it what it offers!

What is ZOD?

By definition of the creators of this package:

Zod is a TypeScript-first schema declaration and validation library. I’m using the term “schema” to broadly refer to any data type, from a simple string to a complex nested object.

Sweet! The amazing thing about this is that it works in runtime so we can feel considerably safer than what we expect from API and Typescript will actually match the response from API.

The Setup

Let’s go ahead and first install the library:

npm install zod typescript
Enter fullscreen mode Exit fullscreen mode

Make sure that in your tsconfig.json that the compiler has the strict option set to true.

    // ... 
    "compilerOptions": { 
        // ... 
        "strict": true 
Enter fullscreen mode Exit fullscreen mode

Easy enough. Now we can start beginning to code. For this example, we’ll be using the Pokemon API to quickly have something available to all. More info on it is here.

The Schema

ZOD works by having a schema of the type and then validating it. If I wanted to just validate a string I’d create the following:


Applying this to an API is fairly simple as we just need to know the object of the response.


Now let’s quickly build out some simple fetch requests to test this out.


Here I’m using two very simple requests. The first one has a response type that directly correlates with the schema we created earlier. The second while instantly generates an error after parsing as it does not match the schema. This error can be handled in a variety of different ways so I suggest checking out the ZOD docs to get a better understanding.


And that’s it! It’s a very simple library to implement but you can see great benefits from the get-go in the confidence of the application at runtime.

Here is a small sandbox with an example of the code above. There are two buttons to test out both requests and how the schema parses the code.

Originally published at on February 13, 2022.

Top comments (0)