Type Errors with Zod Enum Usage
Here is my code:
import { z } from "zod";
import { useForm } from "@tanstack/react-form";
const dataSchema = z.object({
status: z
.enum(["draft", "published", "archived"])
.optional()
.default("draft"),
});
export function Component() {
const form = useForm({
defaultValues: { status: "draft" },
validators: {
onChange: dataSchema,
/* ^?
Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'FormValidateOrFn<{ status: string; }> | undefined'.
Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'StandardSchemaV1<{ status: string; }, unknown>'.
The types of ''~standard'.types' are incompatible between these types.
Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown> | undefined'.
Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }>' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown>'.
The types of 'input.status' are incompatible between these types.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)
*/
},
onSubmit: async ({ value }) => {
// ^? { status: string; }
// It should be { status: "draft" | "published" | "archived" }
console.log("Form submitted:", value);
},
});
console.log(form);
}import { z } from "zod";
import { useForm } from "@tanstack/react-form";
const dataSchema = z.object({
status: z
.enum(["draft", "published", "archived"])
.optional()
.default("draft"),
});
export function Component() {
const form = useForm({
defaultValues: { status: "draft" },
validators: {
onChange: dataSchema,
/* ^?
Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'FormValidateOrFn<{ status: string; }> | undefined'.
Type 'ZodObject<{ status: ZodDefault<ZodOptional<ZodEnum<["draft", "published", "archived"]>>>; }, "strip", ZodTypeAny, { status: "draft" | "published" | "archived"; }, { ...; }>' is not assignable to type 'StandardSchemaV1<{ status: string; }, unknown>'.
The types of ''~standard'.types' are incompatible between these types.
Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown> | undefined'.
Type 'Types<{ status?: "draft" | "published" | "archived" | undefined; }, { status: "draft" | "published" | "archived"; }>' is not assignable to type 'StandardSchemaV1Types<{ status: string; }, unknown>'.
The types of 'input.status' are incompatible between these types.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)
*/
},
onSubmit: async ({ value }) => {
// ^? { status: string; }
// It should be { status: "draft" | "published" | "archived" }
console.log("Form submitted:", value);
},
});
console.log(form);
}