fix: nested root keys typescript

Author: RichardLindhout

example/src/App.tsx

@@ -10,9 +10,13 @@ import {
   Title,
 } from 'react-native-paper';
 
+type AddressCompany = {
+  name: string;
+};
 type AddressType = {
   street: string;
   houseNumber: string;
+  company?: AddressCompany | null;
 };
 type FormType = {
   email: string;
@@ -26,7 +30,7 @@ type FormType = {
     telephone: string;
     revenue: number;
   };
-  address?: AddressType;
+  address?: AddressType | null;
 };
 export default function App() {
   const [
@@ -57,6 +61,8 @@ export default function App() {
     }
   );
 
+  const dd = fh.raw('address.company');
+  console.log({ dd });
   console.log({ values, errors });
   return (
     <View
@@ -186,7 +192,7 @@ export default function App() {
         </HelperText>
 
         <AddressEdit {...fh.raw('address')} />
-
+        <AddressCompanyEdit {...fh.raw('address.company')} />
         <Button mode="contained" onPress={submit} style={{ marginTop: 24 }}>
           Save
         </Button>
@@ -200,11 +206,11 @@ function AddressEdit({
   onChange,
   ...rest
 }: {
-  value: AddressType | undefined;
-  onChange: (v: AddressType | undefined) => void;
+  value: AddressType | null | undefined;
+  onChange: (v: AddressType | null | undefined) => void;
 }) {
   const [{ formProps }, fh] = useFormState<AddressType>(
-    value || { street: '', houseNumber: '' },
+    value || { street: '', houseNumber: '', company: { name: '' } },
     {
       onChange,
     }
@@ -228,6 +234,30 @@ function AddressEdit({
   );
 }
 
+function AddressCompanyEdit({
+  value,
+  onChange,
+  ...rest
+}: {
+  value: AddressCompany | undefined | null;
+  onChange: (v: AddressCompany | undefined | null) => void;
+}) {
+  const [{ formProps }, fh] = useFormState<AddressCompany>(
+    value || { name: '' },
+    {
+      onChange,
+    }
+  );
+  return (
+    <Surface {...rest}>
+      <Title>Nested form</Title>
+      <Form {...formProps}>
+        <TextInput mode="outlined" label="Street" {...fh.text('name')} />
+      </Form>
+    </Surface>
+  );
+}
+
 function looksLikeTelephone(str: string): boolean {
   if (str.length !== 10) {
     return false;

src/types.ts

@@ -1,65 +1,52 @@
 // https://dev.to/tipsy_dev/advanced-typescript-reinventing-lodash-get-4fhe
-type GetIndexedField<T, K> = K extends keyof T
-  ? T[K]
+type GetIndexedField<T, K> = K extends keyof NonNullable<T>
+  ? NonNullable<T>[K]
   : K extends `${number}`
-  ? '0' extends keyof T
+  ? '0' extends keyof NonNullable<T>
     ? undefined
-    : number extends keyof T
-    ? T[number]
+    : number extends keyof NonNullable<T>
+    ? NonNullable<T>[number]
     : undefined
   : undefined;
 type FieldWithPossiblyUndefined<T, Key> =
-  | GetFieldType<Exclude<T, undefined>, Key>
-  | Extract<T, undefined>;
+  | GetFieldType<Exclude<NonNullable<T>, undefined>, Key>
+  | Extract<NonNullable<T>, undefined>;
 type IndexedFieldWithPossiblyUndefined<T, Key> =
-  | GetIndexedField<Exclude<T, undefined>, Key>
-  | Extract<T, undefined>;
+  | GetIndexedField<Exclude<NonNullable<T>, undefined>, Key>
+  | Extract<NonNullable<T>, undefined>;
 export type GetFieldType<T, P> = P extends `${infer Left}.${infer Right}`
-  ? Left extends keyof T
-    ? FieldWithPossiblyUndefined<T[Left], Right>
+  ? Left extends keyof NonNullable<T>
+    ? FieldWithPossiblyUndefined<NonNullable<T>[Left], Right>
     : Left extends `${infer FieldKey}[${infer IndexKey}]`
-    ? FieldKey extends keyof T
+    ? FieldKey extends keyof NonNullable<T>
       ? FieldWithPossiblyUndefined<
-          IndexedFieldWithPossiblyUndefined<T[FieldKey], IndexKey>,
+          IndexedFieldWithPossiblyUndefined<NonNullable<T>[FieldKey], IndexKey>,
           Right
         >
       : undefined
     : undefined
   : P extends keyof T
-  ? T[P]
+  ? NonNullable<T>[P]
   : P extends `${infer FieldKey}[${infer IndexKey}]`
-  ? FieldKey extends keyof T
-    ? IndexedFieldWithPossiblyUndefined<T[FieldKey], IndexKey>
+  ? FieldKey extends keyof NonNullable<T>
+    ? IndexedFieldWithPossiblyUndefined<NonNullable<T>[FieldKey], IndexKey>
     : undefined
   : undefined;
 
 // https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object
 
 export type DotPrefix<T extends string> = T extends '' ? '' : `.${T}`;
-// export type DotNestedKeysAndRoot<T> = (
-//   T extends object
-//     ? {
-//         [K in Exclude<keyof T, symbol>]: `${K}${DotPrefix<
-//           DotNestedKeys<T[K]>
-//         >}`;
-//       }[Exclude<keyof T, symbol>]
-//     : ''
-// ) extends infer D
-//   ? Extract<D, string>
-//   : never;
-
 export type DotNestedKeysWithRoot<T> = (
   T extends object
     ? {
         [K in Exclude<keyof T, symbol>]:
-          | `${K}${DotPrefix<DotNestedKeys<T[K]>>}`
+          | `${K}${DotPrefix<DotNestedKeysWithRoot<T[K]>>}`
           | `${K}`;
       }[Exclude<keyof T, symbol>]
     : ''
 ) extends infer D
   ? Extract<D, string>
   : never;
-
 export type DotNestedKeys<T> = (
   T extends object
     ? {