react-hook-formとzodを併用した際の型の不一致

ここで型をcastした場合、いくつかのAPIの型が正しくなくなる

例

こういうSchemaを用意して

code:ts

const schema = z.object({

price: z.string().transform(Number)

})

type Schema = z.TypeOf<typeof schema>; // { price: number }

useFormに対して使う

code:ts

const methods = useForm<Schema>({

mode: 'onChange',

resolver: zodResolver(schema),

});

const { watch() } = methods;

code:ts

watch(); // { price: number }

getValues(); // { price: number }

割と色んな方向でおかしくなる

そこで以下のようにschemaを定義する

code:ts

const DateFromString = z

.string()

.refine(d => dayjs(d).isValid())

.transform(d => dayjs(d).toDate());

const schema = z.object({

date: DateFromString

})

今の実装だと、そもそもzodを通過していないので、

handleSubmit

これは、zodの責務が大きすぎることが問題とも言える

zodが、「validation」と「cast」の両方を担ってしまっている

あるいは、react-hook-formがそれらを同一の機能としてresolverとして提供しているのが問題

といってもこれらは密接している概念なので仕方ない気もする

resolverはあくまでもvalidationをする場所であって、値の変換を行う場所ではない

便利を追求しすぎて、個々の責務が雑になっている

でもまあこれで一部の問題は解決できそう

例えば、アプリケーション内ではnumberを使用したいものを考える

code:tsx

<input

{...register('number', { valueAsNumber: true })

type="number"

/>

code:ts

const schema = z.object({

price: z.number().positive().int()

})