io-ts typing invalid

[akomm]

Describe the bug
Example, copied from README.MD does not work, triggering error on "resolver" property. I had to replace ref on username with {...register('username')} because the typing failed there too, but looks unrelated to resolver (I guess example with ref is outdated for this react-hook-form example).

To Reproduce
See sandbox

Codesandbox link (Required)
https://codesandbox.io/s/priceless-gareth-hs0zo?file=/src/App.tsx

Expected behavior
No type error

Desktop (please complete the following information):

• OS: linux
• Browser firefox
• Version 89

[bluebill1049]

thanks

[akomm]

Example, copied from README.MD does not work, triggering error on "resolver" property.

@bluebill1049
I'v checked the commit and figured out the resolver problem is untouched. Only the example fixed.
I just pointed out that the example is not 1:1 from readme.md, because the ref did not work, so I had to replace it, but its unrelated to the resolver issue. Maybe I phrased it ambiguous :)

[akomm]

@bluebill1049
Can you please reopen this, as the issue is not fixed.

[bluebill1049]

where is your type definition for the useForm? we don't infer whats' in the schema,

[akomm]

I'm not quite sure what you mean. The type for useForm comes from the react-hook-form library itself. It had initially a schema options, which inferred the schema. It had been removed and replaced with this adapter approach. Its nowhere indicated it does not infer anymore and even the example is as if its still the same (inferred). The code is from example.

If there is a peer specific adapter (ioTsResolver), why should it not infer anymore, like it was before with the schema property? And if its really intended, then I guess at least the example can be fixed :)

[jorisre]

Hi @akomm,

You've to pass yourself the type definition of your form data:

import * as t from "io-ts";
import { useCallback } from "react";
import { useForm } from "react-hook-form";
import { ioTsResolver } from "@hookform/resolvers/io-ts";

const schema = t.type({
  file: t.string
});

interface FormData {
  file: string;
}

export default function App() {
  const { register, handleSubmit } = useForm<FormData>({
    resolver: ioTsResolver(schema)
  });

  const onSubmit = useCallback((values: unknown) => {
    console.log(values);
  }, []);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="file" {...register("file")} />
      <button type="submit">submit</button>
    </form>
  );
}

I'm not a user of io-ts, but I think you can do something as Zod do: https://github.com/colinhacks/zod#type-inference

Here is how to use TypeScript with useForm: https://react-hook-form.com/ts#UseFormProps

Hope it helps :)

[akomm]

Thanks. I know I can type myself or use the utility types in the lib to infer. This issue was not a question. I guess you can leave the wrong example and confusion to all those switching to the adapter version, because it suddenly does not infer and every source in regards to validation integration tries to convince its basically the same as before ;P The reason why I initially asummed its a bug.

[github-actions]

🎉 This issue has been resolved in version 2.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀