🥃 Infer return type of watch method when possible (react-hook-form#590)

Fix react-hook-form#576
mshahin364 · Nov 28, 2019 · 5614b44 · 5614b44
1 parent 3fe45d1
commit 5614b44
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/app/src/conditionalField.tsx b/app/src/conditionalField.tsx
@@ -5,6 +5,7 @@ let renderCounter = 0;
 
 const ConditionalField: React.FC = () => {
   const { register, handleSubmit, watch, formState } = useForm<{
+    selectNumber: string;
     firstName: string;
     lastName: string;
     min: string;
@@ -27,9 +28,9 @@ const ConditionalField: React.FC = () => {
     >
       <select name="selectNumber" ref={register({ required: true })}>
         <option value="">Select</option>
-        <option value={1}>1</option>
-        <option value={2}>2</option>
-        <option value={3}>3</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
       </select>
 
       {selectNumber === '1' && (
@@ -73,6 +74,7 @@ const ConditionalField: React.FC = () => {
       <button id="submit">Submit</button>
       <div id="state">{JSON.stringify(formState)}</div>
       <div id="result">{JSON.stringify(result)}</div>
+      <div id="result">{typeof selectNumber}</div>
       <div id="renderCount">{renderCounter}</div>
     </form>
   );

diff --git a/app/src/watch.tsx b/app/src/watch.tsx
@@ -9,7 +9,7 @@ const Watch: React.FC = () => {
       firstName: string;
       lastName: string;
     };
-    toggle: string;
+    toggle: boolean;
   }>();
   const onSubmit = () => {};
   const test = watch('test');

diff --git a/src/contextTypes.ts b/src/contextTypes.ts
@@ -38,10 +38,10 @@ export interface FormContextValues<
   unregister(names: FieldName<FormValues>[]): void;
   unregister(names: FieldName<FormValues> | FieldName<FormValues>[]): void;
   watch(): FormValues;
-  watch(
-    field: FieldName<FormValues>,
+  watch<T extends FieldName<FormValues>>(
+    field: T,
     defaultValue?: string,
-  ): FieldValue<FormValues>;
+  ): FormValues[T];
   watch(
     fields: FieldName<FormValues>[],
     defaultValues?: Partial<FormValues>,

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -575,10 +575,10 @@ export default function useForm<FormValues extends FieldValues = FieldValues>({
   }
 
   function watch(): FormValues;
-  function watch(
-    field: FieldName<FormValues>,
+  function watch<T extends FieldName<FormValues>>(
+    field: T,
     defaultValue?: string,
-  ): FieldValue<FormValues>;
+  ): FormValues[T];
   function watch(
     fields: FieldName<FormValues>[],
     defaultValues?: Partial<FormValues>,