How to print Typescript definition of inferred type?

[IKoshelev]

I've made a ZOD schema and have an Inferred Type. Now I need to provide this resulting type to the users of our library without any ties to ZOD. Can someone please advise how do I do this?

const FooBarBazSchema = z.object({
    foo: z.string(),
    bar: z.number(),
    baz: z.boolean()
});

export type FooBarBaz = z.infer<typeof FooBarBazSchema>;

Currently, generated d.ts file looks like this:

declare const FooBarBazSchema: z.ZodObject<{
    foo: z.ZodString;
    bar: z.ZodNumber;
    baz: z.ZodBoolean;
}, "strip", z.ZodTypeAny, {
    foo?: string;
    bar?: number;
    baz?: boolean;
}, {
    foo?: string;
    bar?: number;
    baz?: boolean;
}>;
export declare type FooBarBaz = z.infer<typeof FooBarBazSchema>;

I'm looking for an elegant solution to produce this:

export type FooBarBaz = {
    foo: string;
    bar: number;
    baz: boolean;
}

I'm open to any suggestions how to do it. If none are found - I may eventually experiment with TS compiler API and see if I can extract types that way.

[JacobWeisenburger]

I'm not sure that the question is very clear on what you are wanting? What do you mean by: "without any ties to zod"?

Can you not just export type FooBarBaz?

[samb-corrio]

I'm guessing that @IKoshelev wants to be able to generate .ts code/files for the type so that there's no direct dependency on their code that declares schemas or the indirect dependencies on zod from those schemas. That would be more of build pipeline feature though.

[IKoshelev]

@samb-corrio indeed, that is what I'm looking for. I've updated initial post with clarification.

[JacobWeisenburger]

In the Ecosystem section of the docs, it shows other libraries that might do what you are asking.

• ts-to-zod: Convert TypeScript definitions into Zod schemas.

ts-to-zod looks like it's the opposite of what you are looking for, but perhaps there is a way to use it to do what you want.

[IKoshelev]

@JacobWeisenburger yes, I saw that one, but it's exactly reverse of what I'm looking for. The type information I'm looking for is already produced by Zod via infer, now all I need is to a good way to print it out. If I have enough time - I will try to use TS compiler API.

[StefanTerdell]

It's a bit convoluted... But you could use the zod-to-json-schema package and then a json-schema-to-ts package or tool such as this one. It should work for most cases, except when there is no logical overlap (such as promises, functions and maps/sets etc).

[sachinraja]

I've also wanted to do this and tried to the same way you described. I wasn't able to find a json schema to ts package that worked with all the zod features though (in the schema produced by zod-to-json-schema). I believe recursive types were the main problem there, but there were probably a few other issues too.

Either way I think this would just be a nice feature to have work out of the box in zod or a third party package.

[PowerSupply]

I also tried this approach but the json-schema-to-ts package really does not seem to be geared for running in the browser.

My current solution is to use zod -> zod-to-json-schema -> quicktype-core for displaying the corresponding TypeScript type.

[sachinraja]

I decided to make a library for this, check it out here (zod-to-ts). It converts your schema into a TS AST node.

[scotttrinh]

@sachinraja Amazing! Feel free to open a PR to add this to the list of ecosystem tools in the README.

[PowerSupply]

Hi,
I used your package, and while it seems to work well it has a problem with bundle size if you use it in the browser since it depends on the whole of typescript. This makes my bundle grow by over 3mb.

My current solution is to use zod -> zod-to-json-schema -> quicktype-core for displaying the corresponding TypeScript type.

The bundle only grows by about 1mb by using this approach.

[amanzrx4]

This is such a common use case. How you all use backend types in your frontend if not by this?

[nboliver-ventureweb]

Also looking for this use case!

[rijenkii]

This is impossible to do consistently at runtime, without typescript compiler fuckery. Consider this code:

const schema = z.string().transform(() => 80085);
const value = schema.parse("test");

Runtime analyzers will say that schema.parse will return type string, because they have no clue what the transform function is doing:

import { zodToTs, printNode } from "zod-to-ts";

console.log(printNode(zodToTs(schema, "schema").node));
// Outputs `string`.

At runtime value will be of type number:

console.log(typeof schema.parse("test"));
// Outputs `number`.

If you need your schemas in the frontend and in the backend -- move them to an external package, and accept that you will have to ship at least the zod types in the frontend. If your treeshaker is good, then zod code will not enter your final js bundles.

Or if you are sure that you will not use any transformations, then you can try using zod-to-ts.