typescript - เมื่อมีสคีมา zod ที่มีการรวมแบบ discriminated union เราจะปรับปรุงฟอร์มให้เป็นชนิด discriminated type ได้อย่างไร?

เมื่อกำหนดสคีมาที่เป็นยูเนียนที่มีตัวแยก ฉันต้องการที่จะสามารถจำกัดประเภทของฟอร์มตามตัวแยก อย่างไรก็ตาม การพยายามใช้ตัวป้องกันประเภทด้วย watch หรือ getValues นั้นไม่สามารถใช้งานได้

เป็นไปได้หรือไม่ที่จะปรับปรุงประเภทของ form ให้เป็นประเภทย่อยที่เฉพาะเจาะจงมากขึ้น?

const BazSchema = z.object({
  type: z.literal('baz'),
  baz: z.string(),
});
type BazSchema = z.infer<typeof BazSchema>;
const BarSchema = z.object({
  type: z.literal('bar'),
  bar: z.string(),
});
type BarSchema = z.infer<typeof BarSchema>;

const Schema = z.discriminatedUnion('type', [BazSchema, BarSchema]);

type Schema = z.infer<typeof Schema>;

export function MyComponent() {
  const form = useForm<Schema>({
    defaultValues: {
      type: 'baz',
    },
  });

  const type = form.watch('type');
  if (type === 'baz') {
    return <BazForm form={form} />;
  }
}

export function BazForm({ form }: { form: UseFormReturn<BazSchema> }) {
  return (
    <form {...form}>
      <input {...form.register('baz')} />
    </form>
  );

}

Codesandbox: https://codesandbox.io/p/sandbox/zod-discriminated-union-mpxn4h?file=%2Fsrc%2FApp.tsx