io-ts typing invalid

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

[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 😃

[github-actions[bot]]

🎉 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 📦🚀