How to use Zod schema with existing TypeScript interface? #2796
-
|
I see Zod described as a "TypeScript-first" library but am struggling to figure out how to actually integrate it with my TypeScript definitions. Is there a way to pass a TypeScript interface to my Zod schema as a generic and have my linter tell me if they're not compatible? This is how it looks in Yup: import { object, number, string, ObjectSchema } from 'yup';
interface Person {
name: string;
age?: number;
sex: 'male' | 'female' | 'other' | null;
}
// will raise a compile-time type error if the schema does not produce a valid Person
const schema: ObjectSchema<Person> = object({
name: string().defined(),
age: number().optional(),
sex: string<'male' | 'female' | 'other'>().nullable().defined(),
});
// ❌ errors:
// "Type 'number | undefined' is not assignable to type 'string'."
const badSchema: ObjectSchema<Person> = object({
name: number(),
});I found discussion here and here but didn't see any solution I could understand, or relied on codegen and external libraries. I think something like this might work? But it's very boilerplatey and I don't see anything like this in the docs: interface Person {
name: string;
age?: number;
sex: "male" | "female" | "other" | null;
}
const zodSchema = z.object({
name: z.string(),
age: z.number().optional(),
sex: z.enum(["male", "female", "other"]).nullable(),
});
type InferredPerson = z.infer<typeof zodSchema>;
function assertType<T>(_value: T) {}
assertType<Person>({} as InferredPerson); |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
Perhaps this thread might be of some help: #1928 |
Beta Was this translation helpful? Give feedback.
-
|
The top voted post in your linked discussion says this
So it sounds like this isn't possible? Can my original issue be kept open as a feature request? I just went through the same experience of reading through a chain of various closed issues and discussions before creating mine. It sounds like ensuring my Zod schema matches a TypeScript type is not easy and not mentioned in the docs, which I expected would be the most common usage of a TypeScript-first schema library. |
Beta Was this translation helpful? Give feedback.
-
I reopened it here: #2807 |
Beta Was this translation helpful? Give feedback.
-
|
In my situation, I have an application where types are automatically exported from the backend, but do not contain validation logic. So I write the zod schema in the frontend, but I do want it to adhere to the exported types. While this is not possible yet with zod, I made this simple wrapper function as a workaround that makes sure a zod object adheres to a type, for anybody else stumbling upon this: export function validate<
NativeType,
SchemaType extends ZodType<NativeType> = ZodType<NativeType>
>(schema: SchemaType) {
return schema;
}You would use it like this: // exported from backend
type UpdateUserRequestData = {
username: string;
age: number;
};
const updateUserSchema = validate<UpdateUserRequestData>(
z.object({
username: z.string().min(8).max(32),
age: z.number(),
})
);
validate<UpdateUserRequestData>(
z.object({
// typo in field name, should error
userName: z.string().min(8).max(32),
// zod type doesn't match up with TS type, should error
age: z.string(),
})
);
validate<UpdateUserRequestData>(
z.object({
// forgot to add a field that's required in TS type, should error
})
);This is just a workaround until we have a first-party feature built into zod, but it helped me bridge the time until then 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Another workaround I found (I'm not even sure I'd call it a "workaround" since it's published by collinhacks himself) was the toZod package. This seems to do what I wanted, the only problem is it doesn't seem to highlight extra fields on the Zod schema, only missing fields or fields of an incompatible type. My code looks like this now: import { toZod } from "tozod";
export interface UserCreate {
username: string;
email: string;
password: string;
}
const zodSchema: toZod<UserCreate> = z.object({
username: z.string().nonempty("Username can't be blank"),
email: z.string().nonempty("Email can't be blank").email(),
password: z.string().nonempty("Password can't be blank"),
});I do think this needs to be mentioned in the Zod docs, and ideally included by default instead of a separate package. The toZod README says this:
...which I found interesting. Why would defining types in TypeScript be the "inverse" to how Zod typically works, are most people defining Zod schemas as their single source of truth and exporting the inferred types to be used throughout the rest of the app? That seems backwards to me. |
Beta Was this translation helpful? Give feedback.
-
|
@adamerose Yes, that's how Zod is usually used (in my bubble at least 🙂), with the const mySchema = z.object({
username: z.string(),
age: z.number(),
});
type MySchema = z.infer<typeof mySchema>;
const { register } = useForm<MySchema>({
resolver: zodResolver(mySchema),
});
return (
<form>
<input {...register("username")} />
{/* typo, this should error */}
<input {...register("usernaem")} />
</form>
);The toZod package sounds like it does just what OP wants to achieve, except that it hasn't been updated in three years and has the glaring bug you mentioned. Fixing it up and promoting it to be part of Zod proper would be great imho. |
Beta Was this translation helpful? Give feedback.
I reopened it here: #2807