Unlocking the potential of deeply nested child objects

Question

Unlocking the potential of deeply nested child objects

I have a recursively typed object that I want to retrieve the keys and any child keys of a specific type from.

For example, I am looking to extract a union type consisting of:

'/another' | '/parent' | '/child'

Here is an illustration:

export interface RouteEntry {
    readonly name: string,
    readonly nested : RouteList | null
}
export interface RouteList {
    readonly [key : string] : RouteEntry
}

export const list : RouteList = {
    '/parent': {
        name: 'parentTitle',
        nested: {
            '/child': {
                name: 'child',
                nested: null,
            },
        },
    },
    '/another': {
        name: 'anotherTitle',
        nested: null
    },
}

In TypeScript, you can use keyof typeof RouteList to obtain the union type:

'/another' | '/parent'

Is there a way to also capture the nested types?

typescript

Answer 1

Answer №1

Below is a solution that demonstrates infinite recursion:

type Paths<T> = T extends RouteList
  ? keyof T | { [K in keyof T]: Paths<T[K]['nested']> }[keyof T]
  : never

type ListPaths = Paths<typeof list> // -> "/parent" | "/another" | "/child"

This was tested using Typescript v3.5.1. It's important to note that you should follow the advice of @jcalz and remove the type annotation from the list variable.

Answer 2

Below is a solution that demonstrates infinite recursion:

type Paths<T> = T extends RouteList
  ? keyof T | { [K in keyof T]: Paths<T[K]['nested']> }[keyof T]
  : never

type ListPaths = Paths<typeof list> // -> "/parent" | "/another" | "/child"

This was tested using Typescript v3.5.1. It's important to note that you should follow the advice of @jcalz and remove the type annotation from the list variable.

Answer 3

Answer №2

It's a challenging question to tackle. TypeScript currently does not support both ~~mapped conditional types~~ and general recursive type definitions, which are essential for creating the union type you're looking for. (Edit 2019-04-05: conditional types were added in TS2.8) Here are some complexities you may encounter:

The nested property of a RouteEntry can be null at times, causing issues with type expressions that evaluate to keyof null or null[keyof null]. A workaround involves adding a dummy key to avoid null values and then removing it later.
The type alias used (RouteListNestedKeys<X>) might need self-definition, resulting in a "circular reference" error. One possible solution is defining it up to a certain nesting level (e.g., 9 levels), but this could slow down compilation as it eagerly evaluates all levels upfront.
Extensive use of mapped types for type alias composition triggers a bug with composing mapped types until TypeScript 2.6. A workaround suggests using generic default type parameters.
The step of removing a dummy key requires a type operation known as Diff, functioning properly from TypeScript 2.4 onward.

Despite these challenges, I have a functional solution, albeit complex. Before diving into the code, remember to remove the type annotation from the list variable declaration:

export const list = { // ...

By letting TypeScript infer the type instead of specifying it as

RouteList</code, you retain the complete nested structure information without losing it due to type constraints.</p>

<p>Here is the code snippet:</p>

<pre><code>// Code block containing various type definitions

If you examine ListNestedKeys, you'll find it as "parent" | "another" | "child", fulfilling your requirement. Ultimately, it's up to you to decide if the effort was worthwhile.

Phew! I hope this clears things up for you. Good luck!

Answer 4

It's a challenging question to tackle. TypeScript currently does not support both ~~mapped conditional types~~ and general recursive type definitions, which are essential for creating the union type you're looking for. (Edit 2019-04-05: conditional types were added in TS2.8) Here are some complexities you may encounter:

The nested property of a RouteEntry can be null at times, causing issues with type expressions that evaluate to keyof null or null[keyof null]. A workaround involves adding a dummy key to avoid null values and then removing it later.
The type alias used (RouteListNestedKeys<X>) might need self-definition, resulting in a "circular reference" error. One possible solution is defining it up to a certain nesting level (e.g., 9 levels), but this could slow down compilation as it eagerly evaluates all levels upfront.
Extensive use of mapped types for type alias composition triggers a bug with composing mapped types until TypeScript 2.6. A workaround suggests using generic default type parameters.
The step of removing a dummy key requires a type operation known as Diff, functioning properly from TypeScript 2.4 onward.

Despite these challenges, I have a functional solution, albeit complex. Before diving into the code, remember to remove the type annotation from the list variable declaration:

export const list = { // ...

By letting TypeScript infer the type instead of specifying it as

RouteList</code, you retain the complete nested structure information without losing it due to type constraints.</p>

<p>Here is the code snippet:</p>

<pre><code>// Code block containing various type definitions

If you examine ListNestedKeys, you'll find it as "parent" | "another" | "child", fulfilling your requirement. Ultimately, it's up to you to decide if the effort was worthwhile.

Phew! I hope this clears things up for you. Good luck!

Answer 5

Answer №3

@Aleksi's response demonstrates how to acquire the specified type union

"/parent" | "/another" | "/child"

.

Considering the question pertains to a route hierarchy, it is worth mentioning that since typescript 4.1, the feature Template Literal Types enables not only retrieving all keys but also generating all possible routes:

"/parent" | "/another" | "/parent/child"

type ValueOf<T> = T[keyof T]
type AllPaths<T extends RouteList, Path extends string = ''> = ValueOf<{
    [K in keyof T & string]: 
        T[K]['nested'] extends null 
        ? K 
        : (`${Path}${K}` | `${Path}${K}${AllPaths<Extract<T[K]['nested'], RouteList>>}`)
}>

type AllRoutes = AllPaths<typeof list> // -> "/parent" | "/another" | "/parent/child"

As mentioned in other responses, the list object might not have the RouteList type annotation in order to preserve the type information our AllPaths type relies on.

Answer 6

@Aleksi's response demonstrates how to acquire the specified type union

"/parent" | "/another" | "/child"

.

Considering the question pertains to a route hierarchy, it is worth mentioning that since typescript 4.1, the feature Template Literal Types enables not only retrieving all keys but also generating all possible routes:

"/parent" | "/another" | "/parent/child"

type ValueOf<T> = T[keyof T]
type AllPaths<T extends RouteList, Path extends string = ''> = ValueOf<{
    [K in keyof T & string]: 
        T[K]['nested'] extends null 
        ? K 
        : (`${Path}${K}` | `${Path}${K}${AllPaths<Extract<T[K]['nested'], RouteList>>}`)
}>

type AllRoutes = AllPaths<typeof list> // -> "/parent" | "/another" | "/parent/child"

As mentioned in other responses, the list object might not have the RouteList type annotation in order to preserve the type information our AllPaths type relies on.

Unlocking the potential of deeply nested child objects

Answer №1

Answer №2

Answer №3

Similar questions

The Angular project seems to be experiencing technical difficulties following a recent update and is

What exactly does bivarianceHack aim to achieve within TypeScript type systems?

Inheritance from WebElement in WebdriverIO: A Beginner's Guide

Is the async pipe the best choice for handling Observables in a polling scenario

The object[] | object[] type does not have a call signature for the methods 'find()' and 'foreach()'

Is it possible to efficiently share sessionStorage among multiple tabs in Angular 2 and access it right away?

There is a WARNING occurring at line 493 in the file coreui-angular.js located in the node_modules folder. The warning states that the export 'ɵɵdefineInjectable' was not found in the '@angular/core' module

A special function designed to accept and return a specific type as its parameter and return value

Unable to locate a declaration file for the 'mymodule' module

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

The seamless merging of Angular2, TypeScript, npm, and gulp for enhanced development efficiency

Tips for incorporating asynchronous page components as a child element in next.js?

What is the abbreviation for a 'nested' type within a class in TypeScript?

React/TypeScript - react-grid-layout: The onDrag event is fired upon clicking the <div> element

Arranging a dictionary by its keys using Ramda

What is the best way to send out Redux actions?

Using function overloading in TypeScript causes an error

Understanding the limitations of function overloading in Typescript

Transform a list of H1..6 into a hierarchical structure

Is there a way for me to use TypeScript to infer the type of the value returned by Map.get()?