TypeScript Type Extraction with Zod

TypeScript and Zod provide a powerful combination that makes the experience of writing TypeScript much more enjoyable and pleasant. Not that it wasn't already but it really smooths out some edges. Validation with Zod not only helps you produce runtime validations but TypeScript static type inference as well. This ability to generate statice type inference essentially takes away the need to write complex type guards when narrowing types in TypeScript.

In this short blog post we will learn how to extract a type from a Zod schema so that it can be used through our application. Say you've got the following schema:

let issue: unknown;

let issueSchema = z.object({
        title: z.string(),
        tags: z.array(z.string()).default([])
})

We would use this Zod schema to parse any object we have of the described shape:

let issue: unknown;
issue = {
	title: "fix CSS grid bug",
	tags: ["layout", "css", "frontend"]
};

let parsedIssue = issueSchema.parse(issue);

Once we parse that issue you'll find that two things happen:

• TypeScript's static analysis will no longer view the issue variable as type unkonwn but instead it will view it as the type described in our schema
• Zod will run a runtime validation on the object we pass to the parser

So we're getting two benefits here by using Zod together with TypeScript. The part we want to focus on is getting that static type inferred from static analysis. Is there a way to grab that type inferred from our Zod schema and use it elsewhere in our application? There is! Zod has an infer method that allows us to do just that

type IIssue = z.infer<typeof issueSchema>;

let issuesArray: Array<IIssue>;

export { IIssue };

We use the infer method to extract a type definition from our schema. This gives us the ability to use it anywhere else we'd like in our application.

Let's pause a second though and talk about the z.infer method. It really isn't a method per se, it is instead a type-level utility function. Not unlike ReturnType which is used to infer the return type of a function or Parameters which is used to infer the parameter types of a function's parameters.

We've now covered how to extract a type from a Zod schema. In which we first write a Zod schema and then generate a type from it. Very useful! However, what if we had it the other way around? What if we had Types defined and wanted to generate a Zod schema from that Type definition.

The best way to do this, as of today that I know of, is to use the handy TypeScript to Zod website.

That's it for this post. Hope you find it useful.

If you have any doubts, questions, suggestions, corrections, grievances or compliments, feel free to write to [email protected] or @sillypoise, I'll happily answer to any of the mentioned above.

Until next time, cheers!