Flatten an object in TypeScript

Question

Flatten an object in TypeScript

Can the structure of this type be flattened?

type MySchema = {
  fields: {
    hello: {
      type: 'Group'
      fields: {
        world: {
          type: 'Group'
          fields: { yay: { type: 'Boolean' } }
        }
      }
    }
    world: { type: 'Boolean' }
  }
}

Transforming it into:

type MyFlattenedSchema = {
  hello: { type: 'Group' }
  'hello.world': { type: 'Group' }
  'hello.world.yay': { type: 'Boolean' }
  world: { type: 'Boolean' }
}

I've been attempting to solve this for a couple of days now, but all I'm getting is a flattened union:

type FSchema = { type: string; fields?: Record<string, FSchema> }

type GetPathAndChilds<
  T extends Record<string, FSchema>,
  PK extends string | null = null
> = {
  [FN in keyof T & string]-?: {
    path: PK extends string ? `${PK}.${FN}` : `${FN}`
    type: T[FN]['type']
    // config: T[K]
    childs: T[FN] extends { fields: Record<string, FSchema> }
      ? GetPathAndChilds<
          T[FN]['fields'],
          PK extends string ? `${PK}.${FN}` : `${FN}`
        >
      : never
  }
}[keyof T & string]

type FlattenToUnion<T extends { path: string; type: string; childs: any }> =
  T extends {
    path: infer P
    type: infer U
    childs: never
  }
    ? { [K in P & string]: { type: U } }
    : T extends { path: infer P; type: infer U; childs: infer C }
    ? { [K in P & string]: { type: U } } | FlattenToUnion<C>
    : never

type MySchemaToUnion = FlattenToUnion<GetPathAndChilds<TestSchema['fields']>>
//   | { hello: { type: 'Group' } }
//   | { 'hello.world': { type: 'Group' } }
//   | { 'hello.world.yay': { type: 'Boolean' } }
//   | { world: { type: 'Boolean' } }

After researching on stackoverflow, the error 'Type instantiation is excessively deep and possibly infinite' is what I keep encountering.

typescript types

Answer 1

Answer №1

From my experience, handling deeply nested type operations always brings about unexpected challenges with various edge cases such as optional properties, union types, or index signatures. The behavior in such cases is often unpredictable, requiring thorough testing against anticipated scenarios. Be prepared for the need to refactor if something unexpectedly goes wrong despite a seemingly perfect solution.

With that said, I would propose an implementation called FlattenSchema<> that aims to transform your example input into the desired output. However, its usefulness in actual production code may vary.

The goal is to create a function FlattenSchema<T> that takes an object T with a property named fields of type

object</code and flattens these fields. Here's how we can achieve this:</p>
<pre><code>type FlattenSchema<T extends { fields: object }> =
   FlattenFields<T["fields"]>;

Next, we define FlattenFields<T>, where T represents an object type whose properties themselves contain either a type property (to be directly outputted) or a fields property (for recursion using FlattenSchema) or both:

type FlattenFields<T extends object> = { [K in keyof T]: (x:
   (T[K] extends { type: any } ?
      Record<K, { type: T[K]['type'] }>
      : unknown) &
   (T[K] extends { fields: object } ?
      PrependKey<K, FlattenSchema<T[K]>>
      : unknown)
) => void }[keyof T] extends (x: infer I) => void ?
   { [K in keyof I]: I[K] } : never;

This entails multiple steps, including intersecting the results for each property of

T</code, leveraging TypeScript features to techniques like union-to-intersection conversions when needed.</p>
<p>If <code>T[K]

contains a type property, we utilize Record utility type to output it. If it includes a fields property, we resort to recursing FlattenSchema. We then combine these outputs cautiously to avoid cluttered results through mapped types.

Lastly, to concatenate keys appropriately, we have PrependKey:

type PrependKey<K extends PropertyKey, T> =
   { [P in Exclude<keyof T, symbol> as
      `${Exclude<K, symbol>}.${P}`]: T[P] };

This involves key remapping along with template literal types to add prefixes seamlessly.

Testing our implementation:

type MySchema = {
   fields: {
      hello: {
         type: 'Group'
         fields: {
            world: {
               type: 'Group'
               fields: { yay: { type: 'Boolean' } }
            }
         }
      }
      world: { type: 'Boolean' }
   }
}
   
type MyFlattenedSchema = FlattenSchema<MySchema>;
/* Output compared to original Schema:
    hello: { type: "Group"; };
    "hello.world": { type: "Group"; };
    "hello.world.yay": { type: "Boolean"; };
    world: { type: "Boolean"; };
} */

The flattened schema aligns perfectly with the intended structure! (Remember the initial caution though!)

Try the code on TypeScript Playground

Answer 2

From my experience, handling deeply nested type operations always brings about unexpected challenges with various edge cases such as optional properties, union types, or index signatures. The behavior in such cases is often unpredictable, requiring thorough testing against anticipated scenarios. Be prepared for the need to refactor if something unexpectedly goes wrong despite a seemingly perfect solution.

With that said, I would propose an implementation called FlattenSchema<> that aims to transform your example input into the desired output. However, its usefulness in actual production code may vary.

The goal is to create a function FlattenSchema<T> that takes an object T with a property named fields of type

object</code and flattens these fields. Here's how we can achieve this:</p>
<pre><code>type FlattenSchema<T extends { fields: object }> =
   FlattenFields<T["fields"]>;

Next, we define FlattenFields<T>, where T represents an object type whose properties themselves contain either a type property (to be directly outputted) or a fields property (for recursion using FlattenSchema) or both:

type FlattenFields<T extends object> = { [K in keyof T]: (x:
   (T[K] extends { type: any } ?
      Record<K, { type: T[K]['type'] }>
      : unknown) &
   (T[K] extends { fields: object } ?
      PrependKey<K, FlattenSchema<T[K]>>
      : unknown)
) => void }[keyof T] extends (x: infer I) => void ?
   { [K in keyof I]: I[K] } : never;

This entails multiple steps, including intersecting the results for each property of

T</code, leveraging TypeScript features to techniques like union-to-intersection conversions when needed.</p>
<p>If <code>T[K]

contains a type property, we utilize Record utility type to output it. If it includes a fields property, we resort to recursing FlattenSchema. We then combine these outputs cautiously to avoid cluttered results through mapped types.

Lastly, to concatenate keys appropriately, we have PrependKey:

type PrependKey<K extends PropertyKey, T> =
   { [P in Exclude<keyof T, symbol> as
      `${Exclude<K, symbol>}.${P}`]: T[P] };

This involves key remapping along with template literal types to add prefixes seamlessly.

Testing our implementation:

type MySchema = {
   fields: {
      hello: {
         type: 'Group'
         fields: {
            world: {
               type: 'Group'
               fields: { yay: { type: 'Boolean' } }
            }
         }
      }
      world: { type: 'Boolean' }
   }
}
   
type MyFlattenedSchema = FlattenSchema<MySchema>;
/* Output compared to original Schema:
    hello: { type: "Group"; };
    "hello.world": { type: "Group"; };
    "hello.world.yay": { type: "Boolean"; };
    world: { type: "Boolean"; };
} */

The flattened schema aligns perfectly with the intended structure! (Remember the initial caution though!)

Try the code on TypeScript Playground

Flatten an object in TypeScript

Answer №1

Similar questions

The combination of Next.JS and React Objects is not acceptable as a React child

setting the minimum date for a datepicker

Navigating back to the previous page: Implementing the Router Module in Ionic 4 with Angular

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

Encountering an issue with Nuxt 3.5.1 during the build process: "ERROR Cannot read properties of undefined (reading 'sys') (x4)"

Guide for referencing brackets with Joi validation

Creating a primary index file as part of the package building process in a node environment

Customize buttons in Material UI using the styled component API provided by MUI

The entire DOM in Angular2+ flickers upon loading a component using ngFor

Exploring the Potential of Jest Testing for Angular 6 Services

Guide on accessing the afterClosed() method / observable in Angular from a Modal Wrapper Service

Extracting the content within Angular component tags

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

Ways to specify a setter for a current object property in JavaScript

Is there a way to incorporate an "else" condition in a TypeScript implementation?

Tips for solving a deliberate circular dependency in an angular provider

Strange occurrences observed in the functionality of Angular Material Version 16

Retrieve all services within a Fargate Cluster using AWS CDK

Restricting a generic parameter to a combination type in Typescript

Replacing the '+' character with a space in HttpParams within Angular 6