Using optional chaining with TypeScript types

Question

Using optional chaining with TypeScript types

I'm dealing with a complex data structure that is deeply nested, and I need to reference a type within it. The issue is that this type doesn't have its own unique name or definition. Here's an example:

MyQuery['system']['errors']['list'][number]

I generate the MyQuery type automatically from a graphql query using graphql-codegen. I'm trying to determine the type of a single error, but I face two challenges:

All intermediate values are nullable.
I lack a distinct identifier for the error in my auto-generated types.

I've attempted the following solutions:

This method works, but it's difficult to read:

type Error = NonNullable<NonNullable<NonNullable<MyQuery>['system']>['errors']>['list'][number]

This approach doesn't work (?.['field'] also fails)

type Error = MyQuery?['system']?['errors']?['list']?[number]

This solution works, but introduces unnecessary variables:

const error = queryResult?.system?.errors?.list?.[0]
type Error: typeof error

Although somewhat effective, this method results in non-null fields inside Error, which is not desired

import { DeepNonNullable } from 'utility-types'

type Error = DeepNonNullable<MyQuery>['system']['errors']['list'][number]

In essence, I am seeking a simpler way to implement "optional chaining for types" in TypeScript. Given that my API contains a lot of null values, it would be incredibly beneficial if there was a more straightforward approach than using multiple NonNullable<T> statements.

typescript optional-chaining nested-types

Answer 1

Answer №1

Is there a simpler way to implement "optional chaining for types"?

Unfortunately, at this time, there is no built-in method to "optionally chain" deeply nested types. However, it is possible to emulate this functionality using a complex recursive conditional generic type and paths. First, you would need a reusable helper function to handle index signatures:

type _IndexAccess<T, U extends keyof T, V extends string> = V extends "number" 
    ? Exclude<T[U], undefined> extends { [x:number]: any } ? 
        Exclude<T[U], undefined>[number]
        : undefined
    : V extends "string" ?
        Exclude<T[U], undefined> extends { [x:string]: any } ?
            Exclude<T[U], undefined>[string]
            : undefined
    : V extends "symbol" ?
        Exclude<T[U], undefined> extends { [x:symbol]: any } ?
            Exclude<T[U], undefined>[symbol]
            : undefined
    : undefined;

Next, you can create a helper type for recursively navigating the nested type using infer and template literal types to process the path:

type DeepAccess<T, K extends string> = K extends keyof T 
    ? T[K] 
    : K extends `${infer A}.${infer B}` 
        ? A extends keyof T 
            ? DeepAccess<Exclude<T[A], undefined>, B>
            : A extends `${infer C}[${infer D}]`
                ? DeepAccess<_IndexAccess<T, C extends keyof T ? C : never, D>, B>
                : undefined
    : K extends `${infer A}[${infer B}]` 
        ? A extends keyof T 
            ? B extends keyof T[A] 
                ? T[A][B] 
                : _IndexAccess<T, A, B>       
            : undefined
    : undefined;

While not the most elegant solution, this approach allows for seamless lensing into nested types:

type MyQuery = {
    system?: {
        errors?: {
            list?: [{
                answer: 42,
                questions: { known: false }[]
            }]
        }
    }
};

// false
type t1 = DeepAccess<MyQuery, "system.errors.list[number].questions[number].known">;

// [{ answer: 42; questions: { known: false; }[]; }] | undefined
type t2 = DeepAccess<MyQuery, "system.errors.list">;

// 42
type t3 = DeepAccess<MyQuery, "system.errors.list[number].answer">;

// undefined
type t4 = DeepAccess<MyQuery, "system.errors.list.unknown">;

Answer 2

Is there a simpler way to implement "optional chaining for types"?

Unfortunately, at this time, there is no built-in method to "optionally chain" deeply nested types. However, it is possible to emulate this functionality using a complex recursive conditional generic type and paths. First, you would need a reusable helper function to handle index signatures:

type _IndexAccess<T, U extends keyof T, V extends string> = V extends "number" 
    ? Exclude<T[U], undefined> extends { [x:number]: any } ? 
        Exclude<T[U], undefined>[number]
        : undefined
    : V extends "string" ?
        Exclude<T[U], undefined> extends { [x:string]: any } ?
            Exclude<T[U], undefined>[string]
            : undefined
    : V extends "symbol" ?
        Exclude<T[U], undefined> extends { [x:symbol]: any } ?
            Exclude<T[U], undefined>[symbol]
            : undefined
    : undefined;

Next, you can create a helper type for recursively navigating the nested type using infer and template literal types to process the path:

type DeepAccess<T, K extends string> = K extends keyof T 
    ? T[K] 
    : K extends `${infer A}.${infer B}` 
        ? A extends keyof T 
            ? DeepAccess<Exclude<T[A], undefined>, B>
            : A extends `${infer C}[${infer D}]`
                ? DeepAccess<_IndexAccess<T, C extends keyof T ? C : never, D>, B>
                : undefined
    : K extends `${infer A}[${infer B}]` 
        ? A extends keyof T 
            ? B extends keyof T[A] 
                ? T[A][B] 
                : _IndexAccess<T, A, B>       
            : undefined
    : undefined;

While not the most elegant solution, this approach allows for seamless lensing into nested types:

type MyQuery = {
    system?: {
        errors?: {
            list?: [{
                answer: 42,
                questions: { known: false }[]
            }]
        }
    }
};

// false
type t1 = DeepAccess<MyQuery, "system.errors.list[number].questions[number].known">;

// [{ answer: 42; questions: { known: false; }[]; }] | undefined
type t2 = DeepAccess<MyQuery, "system.errors.list">;

// 42
type t3 = DeepAccess<MyQuery, "system.errors.list[number].answer">;

// undefined
type t4 = DeepAccess<MyQuery, "system.errors.list.unknown">;

Using optional chaining with TypeScript types

Answer №1

Similar questions

Aligning two identical components within the same container when triggered by a single click

utilize console.log within the <ErrorMessage> element

registering a back button action in Ionic2 for multiple pages

An error has occurred during the Next.js build process: ReferenceError - The component is not defined

Unable to loop through using ngFor

Accessing the currently operating WS server instance with NodeJS

After being awaited recursively, the resolved promise does not perform any actions

Avoid stopping Bootstrap Vue's events

When working with Typescript, an error may occur related to index types even though the constant object and its

Tips for creating a deepCss selector for an input Textbox in Protractor

Access network path through browser using Angular

What is the best way to fetch data before a component is rendered on the screen?

Exploring ways to simulate an event object in React/Typescript testing using Jest

Exploring the Possibilities of Nipplejs Integration in Vue with Quasar

Angular 4's OrderBy Directive for Sorting Results

Nextjs 14 experiences full page loading due to the presence of multiple root layouts

Transferring dynamic parameters from a hook to setInterval()

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

How to bring in images from the assets folder using React and Typescript

Managing various situations using observables