feat: watch add ts (#416)

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: watch add ts

* feat: add test

* feat: add test

* feat: ts

Author: crazyair

docs/examples/useWatch.tsx

@@ -4,8 +4,19 @@ import Input from './components/Input';
 
 let x = 0;
 
+type FieldType = {
+  main?: string;
+  name?: string;
+  age?: number;
+  gender?: boolean;
+  demo?: string;
+  demo2?: string;
+  id?: number;
+  demo1?: { demo2?: { demo3?: { demo4?: string } } };
+};
+
 const Demo = React.memo(() => {
-  const values = Form.useWatch(['demo']);
+  const values = Form.useWatch<FieldType['demo']>(['demo']);
   console.log('demo watch', values);
   return (
     <Field name="demo">
@@ -14,7 +25,7 @@ const Demo = React.memo(() => {
   );
 });
 const Demo2 = React.memo(() => {
-  const values = Form.useWatch(['demo2']);
+  const values = Form.useWatch<FieldType['demo2']>(['demo2']);
   console.log('demo2 watch', values);
   return (
     <Field name="demo2">
@@ -24,12 +35,19 @@ const Demo2 = React.memo(() => {
 });
 
 export default () => {
-  const [form] = Form.useForm();
+  const [form] = Form.useForm<FieldType>();
   const [visible, setVisible] = useState(true);
   const [visible2, setVisible2] = useState(true);
   const [visible3, setVisible3] = useState(true);
-  const values = Form.useWatch([], form);
-  console.log('main watch', values);
+  const main = Form.useWatch('main', form);
+  const age = Form.useWatch(['age'], form);
+  const demo1 = Form.useWatch(['demo1'], form);
+  const demo2 = Form.useWatch(['demo1', 'demo2'], form);
+  const demo3 = Form.useWatch(['demo1', 'demo2', 'demo3'], form);
+  const demo4 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4'], form);
+  const demo5 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4', 'demo5'], form);
+  const more = Form.useWatch(['age', 'name', 'gender'], form);
+  console.log('main watch', demo1, demo2, main, age, demo3, demo4, demo5, more);
   return (
     <>
       <Form

src/useWatch.ts

@@ -6,9 +6,50 @@ import type { InternalFormInstance, NamePath, Store } from './interface';
 import { useState, useContext, useEffect, useRef } from 'react';
 import { getNamePath, getValue } from './utils/valueUtil';
 
-const useWatch = <ValueType = Store>(dependencies: NamePath = [], form?: FormInstance) => {
-  const [value, setValue] = useState<ValueType>();
-  const valueCacheRef = useRef<ValueType>();
+type GetGeneric<Type> = Type extends FormInstance<infer ValueType> ? ValueType : never;
+
+function useWatch<
+  TDependencies1 extends keyof GetGeneric<TForm>,
+  TForm extends FormInstance,
+  TDependencies2 extends keyof GetGeneric<TForm>[TDependencies1],
+  TDependencies3 extends keyof GetGeneric<TForm>[TDependencies1][TDependencies2],
+  TDependencies4 extends keyof GetGeneric<TForm>[TDependencies1][TDependencies2][TDependencies3],
+>(
+  dependencies: [TDependencies1, TDependencies2, TDependencies3, TDependencies4],
+  form?: TForm,
+): GetGeneric<TForm>[TDependencies1][TDependencies2][TDependencies3][TDependencies4];
+
+function useWatch<
+  TDependencies1 extends keyof GetGeneric<TForm>,
+  TForm extends FormInstance,
+  TDependencies2 extends keyof GetGeneric<TForm>[TDependencies1],
+  TDependencies3 extends keyof GetGeneric<TForm>[TDependencies1][TDependencies2],
+>(
+  dependencies: [TDependencies1, TDependencies2, TDependencies3],
+  form?: TForm,
+): GetGeneric<TForm>[TDependencies1][TDependencies2][TDependencies3];
+
+function useWatch<
+  TDependencies1 extends keyof GetGeneric<TForm>,
+  TForm extends FormInstance,
+  TDependencies2 extends keyof GetGeneric<TForm>[TDependencies1],
+>(
+  dependencies: [TDependencies1, TDependencies2],
+  form?: TForm,
+): GetGeneric<TForm>[TDependencies1][TDependencies2];
+
+function useWatch<TDependencies extends keyof GetGeneric<TForm>, TForm extends FormInstance>(
+  dependencies: TDependencies | [TDependencies],
+  form?: TForm,
+): GetGeneric<TForm>[TDependencies];
+
+function useWatch<TForm extends FormInstance>(dependencies: NamePath, form?: TForm): any;
+
+function useWatch<ValueType = Store>(dependencies: NamePath, form?: FormInstance): ValueType;
+
+function useWatch(dependencies: NamePath = [], form?: FormInstance) {
+  const [value, setValue] = useState<any>();
+  const valueCacheRef = useRef<any>();
   valueCacheRef.current = value;
 
   const fieldContext = useContext(FieldContext);
@@ -57,6 +98,6 @@ const useWatch = <ValueType = Store>(dependencies: NamePath = [], form?: FormIns
   );
 
   return value;
-};
+}
 
 export default useWatch;

tests/useWatch.test.tsx

@@ -275,4 +275,33 @@ describe('useWatch', () => {
       });
     expect(renderTime).toEqual(2);
   });
+  it('typescript', () => {
+    type FieldType = {
+      main?: string;
+      name?: string;
+      age?: number;
+      gender?: boolean;
+      demo?: string;
+      demo2?: string;
+      id?: number;
+      demo1?: { demo2?: { demo3?: { demo4?: string } } };
+    };
+
+    const Demo = () => {
+      const [form] = Form.useForm<FieldType>();
+      const main = Form.useWatch('main', form);
+      const age = Form.useWatch(['age'], form);
+      const demo1 = Form.useWatch(['demo1'], form);
+      const demo2 = Form.useWatch(['demo1', 'demo2'], form);
+      const demo3 = Form.useWatch(['demo1', 'demo2', 'demo3'], form);
+      const demo4 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4'], form);
+      const demo5 = Form.useWatch(['demo1', 'demo2', 'demo3', 'demo4', 'demo5'], form);
+      const more = Form.useWatch(['age', 'name', 'gender'], form);
+      const demo = Form.useWatch<string>(['demo']);
+
+      return <>{JSON.stringify({ main, age, demo1, demo2, demo3, demo4, demo5, more, demo })}</>;
+    };
+
+    mount(<Demo />);
+  });
 });