wise-white

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);
}

12 Replies

wise-whiteOP•4mo ago

I am getting type error when providing default values, and also the type of value isn't as it should be.

probable-pink•4mo ago

Try

defaultValues: { status: "draft" } as z.input<typeof dataSchema>,

defaultValues: { status: "draft" } as z.input<typeof dataSchema>,

wise-whiteOP•4mo ago

It fixes the issue of value's status being string, but the typescript error on onChange is still the same.

correct-apricot•4mo ago

the enum is both set to optional and has a default. You only need one of them and it‘s likely why the type is weird

wise-whiteOP•4mo ago

Doesn't fix the error even after removing .optional() with just default()

correct-apricot•4mo ago

gave it a test and it seems to work

correct-apricot•4mo ago

no errors on my end

wise-whiteOP•4mo ago

I just initialized a project using create-start-app, and it's showing errors for me. https://github.com/binamralamsal/tanstack-form-error-test

GitHub

GitHub - binamralamsal/tanstack-form-error-test

Contribute to binamralamsal/tanstack-form-error-test development by creating an account on GitHub.

wise-whiteOP•4mo ago

probable-pink•4mo ago

z.input not z.infer infer is the output, see: https://zod.dev/?id=type-inference

wise-whiteOP•4mo ago

Thanks for the help to both of you! It resolved my issue

probable-pink•4mo ago

Nice 🙂 Just to have it here for future reference and to add some more info: https://tanstack.com/form/latest/docs/framework/react/guides/submission-handling#transforming-data-with-standard-schemas Your defaultValues are the z.input and you can use schema.parse(value) in onSubmit to get the values of the z.infer/z.output Type.

Gaming

Programming

Type Errors with Zod Enum Usage

Did you find this page helpful?