Type Issues when using `optional` in a zod schema

[Desalutar20]

Describe the bug

I'm getting a type error

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-zsrrzfkt?file=src%2FApp.tsx

Steps to reproduce

Go to App.tsx and see an error

Expected behavior

Working types

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

• Os: Arch linux
• Browser: Zen browser

TanStack Form adapter

None

TanStack Form version

v1.33.5

TypeScript version

v6.0.2

Additional context

No response

[LeCarbonator]

Two things:

1. You named the type alias UpdateProfileInput. However, you used z.infer which is the output type. The input type is z.input.

type UpdateProfileInput = z.input<typeof updateProfileSchema>;

// Alternatively: z.infer
type UpdateProfileOutput = z.output<typeof updateProfileSchema>;

2. satisfies doesn't assign, it only confirms that it could satisfy. For this case, an assertion is needed so that optional properties remain optional. There's multiple ways, but the one below is the easiest.

  const defaultValues: UpdateProfileInput = {
    firstName: '',
    lastName: '',
    avatarUrl: '',
  };
  const form = useForm({
    defaultValues,
    onSubmit: async ({ value }) => {
      console.log(value);
      form.reset();
    },
    validators: {
      onChange: updateProfileSchema,
    },
  });

v2

Important

You are on v1. This is only for future readers.

This'll be made easier in v2. This compiles without needing to assign or change things:

const opts = formOptions.strictSchema({
  defaultValues: {
    firstName: '',
    lastName: '',
    avatarUrl: '',
  },
  validators: [{
      run: updateProfileSchema,
      triggers: []
  }]
})

[Desalutar20]

Two things:

1. You named the type alias UpdateProfileInput. However, you used z.infer which is the output type. The input type is z.input.

type UpdateProfileInput = z.input<typeof updateProfileSchema>;

// Alternatively: z.infer
type UpdateProfileOutput = z.output<typeof updateProfileSchema>;

2. satisfies doesn't assign, it only confirms that it could satisfy. For this case, an assertion is needed so that optional properties remain optional. There's multiple ways, but the one below is the easiest.

  const defaultValues: UpdateProfileInput = {
    firstName: '',
    lastName: '',
    avatarUrl: '',
  };
  const form = useForm({
    defaultValues,
    onSubmit: async ({ value }) => {
      console.log(value);
      form.reset();
    },
    validators: {
      onChange: updateProfileSchema,
    },
  });

v2

[!IMPORTANT]
You are on v1. This is only for future readers.

This'll be made easier in v2. This compiles without needing to assign or change things:

const opts = formOptions.strictSchema({
  defaultValues: {
    firstName: '',
    lastName: '',
    avatarUrl: '',
  },
  validators: [{
      run: updateProfileSchema,
      triggers: []
  }]
})

Thanks