@@ -30,13 +30,11 @@ import { useForm } from "react-hook-form";
3030import { TextField , Checkbox } from " @material-ui/core" ;
3131
3232type FormValues = {
33- uncontrolled: string ;
34- controlled: string ;
33+ flatType: string ;
3534 nested: {
36- uncontrolled : { test: string };
37- controlled : { test: boolean }[];
35+ objectType : { test: string };
36+ arrayType : { test: boolean }[];
3837 };
39- error: string ;
4038};
4139
4240export default function App() {
@@ -47,51 +45,46 @@ export default function App() {
4745
4846 return (
4947 <form onSubmit = { onSubmit } >
50- { /* Uncontrolled Component */ }
5148 <TypedController
52- as = " textarea"
53- name = { [" nested" , " uncontrolled" , " test" ]}
49+ name = " flat"
5450 defaultValue = " "
55- rules = { { required: true } }
51+ render = { ( props ) => < TextField { ... props } /> }
5652 />
57-
58- { /* Controlled Component */ }
53+
5954 <TypedController
60- name = " controlled"
55+ as = " textarea"
56+ name = { [" nested" , " objectType" , " test" ]}
6157 defaultValue = " "
62- render = { ( props ) => < TextField { ... props } /> }
58+ rules = { { required: true } }
6359 />
64-
60+
6561 <TypedController
66- name = { [" nested" , " controlled " , 0 , " test" ]}
62+ name = { [" nested" , " arrayType " , 0 , " test" ]}
6763 defaultValue = { false }
68- rules = { {
69- validate : (value ) => value , // (parameter) value: boolean
70- }}
7164 render = { (props ) => <Checkbox { ... props } />}
7265 />
73-
66+
7467 { /* ❌: Type '"notExists"' is not assignable to type 'DeepPath<FormValues, "notExists">'. */ }
7568 <TypedController
7669 as = " input"
77- name = " notExists"
70+ name = " notExists"
7871 defaultValue = " "
7972 />
80-
81- { /* ❌: Type '(string | number)[]' is not assignable to type 'DeepPath<FormValues, ["nested", "controlled ", 0, "notExists"]>'. */ }
73+
74+ { /* ❌: Type '(string | number)[]' is not assignable to type 'DeepPath<FormValues, ["nested", "objectType ", 0, "notExists"]>'. */ }
8275 <TypedController
8376 as = " input"
84- name = { [" nested" , " controlled " , 0 , " notExists" ]}
77+ name = { [" nested" , " objectType " , 0 , " notExists" ]}
8578 defaultValue = " "
8679 />
87-
80+
8881 { /* ❌: Type 'true' is not assignable to type 'string | undefined'. */ }
8982 <TypedController
9083 as = " input"
91- name = " error "
84+ name = " flatType "
9285 defaultValue = { true }
9386 />
94-
87+
9588 <input type = " submit" />
9689 </form >
9790 );
0 commit comments