Added react-hook-form example

Author: mattpocock

package-lock.json

@@ -149,6 +149,7 @@
     "express": "^4.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.44.3",
     "zod": "^3.17.10"
   }
-}
+}

package.json

@@ -0,0 +1,34 @@
+import { FieldValues, useForm } from "react-hook-form";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * 1. When you provide default values to useForm, the return type of getValues
+ * gets inferred as the shape of those values.
+ *
+ * Investigate why this is, and what TFieldValues is being used for.
+ */
+const formWithValues = useForm({
+  defaultValues: {
+    firstName: "",
+    lastName: "",
+  },
+});
+
+const values = formWithValues.getValues();
+
+type test = Expect<
+  Equal<typeof values, { firstName: string; lastName: string }>
+>;
+
+/**
+ * 2. When you don't pass a default value, the return type of getValues is
+ * inferred as FieldValues.
+ *
+ * Investigate why this is, and what type FieldValues is.
+ */
+
+const formWithoutValues = useForm();
+
+const values2 = formWithoutValues.getValues();
+
+type test2 = Expect<Equal<typeof values2, FieldValues>>;

src/08-external-libraries/59-react-hook-form.explainer.tsx

@@ -0,0 +1,55 @@
+import { useForm } from "react-hook-form";
+import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+
+/**
+ * Here, we're creating a wrapper around react-hook-form's useForm hook.
+ *
+ * We want to change the API slightly so that only certain methods are
+ * exposed. We also want to make sure that defaultValues is ALWAYS
+ * required.
+ */
+const useCustomForm = (defaultValues: any) => {
+  const form = useForm({
+    defaultValues: defaultValues,
+  });
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit,
+    getValues: form.getValues,
+  };
+};
+
+// ---- TESTS ----
+
+// @ts-expect-error defaultValues is required
+useCustomForm();
+
+useCustomForm(
+  // @ts-expect-error defaultValues must be an object
+  2,
+);
+
+const customForm = useCustomForm({
+  firstName: "",
+  lastName: "",
+});
+
+customForm.handleSubmit((values) => {
+  type test = Expect<
+    // Expect that inside handleSubmit, it's inferred as
+    // { firstName: string; lastName: string }
+    ExpectExtends<
+      {
+        firstName: string;
+        lastName: string;
+      },
+      typeof values
+    >
+  >;
+});
+
+// Expect that only the methods we want are exposed
+type test = Expect<
+  Equal<keyof typeof customForm, "register" | "handleSubmit" | "getValues">
+>;

src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx

@@ -0,0 +1,57 @@
+import { DefaultValues, FieldValues, useForm } from "react-hook-form";
+import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+
+/**
+ * We add TValues as a generic to our hook, and use it to type the defaultValues.
+ *
+ * We constrain it to FieldValues so that it's assignable to useForm's defaultValues.
+ */
+const useCustomForm = <TValues extends FieldValues>(defaultValues: TValues) => {
+  const form = useForm({
+    /**
+     * There's a strange papercut here where we have to cast defaultValues as
+     * DefaultValues<TValues> to get it to work.
+     */
+    defaultValues: defaultValues as DefaultValues<TValues>,
+  });
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit,
+    getValues: form.getValues,
+  };
+};
+
+// ---- TESTS ----
+
+// @ts-expect-error defaultValues is required
+useCustomForm();
+
+useCustomForm(
+  // @ts-expect-error defaultValues must be an object
+  2,
+);
+
+const customForm = useCustomForm({
+  firstName: "",
+  lastName: "",
+});
+
+customForm.handleSubmit((values) => {
+  type test = Expect<
+    // Expect that inside handleSubmit, it's inferred as
+    // { firstName: string; lastName: string }
+    ExpectExtends<
+      {
+        firstName: string;
+        lastName: string;
+      },
+      typeof values
+    >
+  >;
+});
+
+// Expect that only the methods we want are exposed
+type test = Expect<
+  Equal<keyof typeof customForm, "register" | "handleSubmit" | "getValues">
+>;