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

Exploring the mechanics behind optional chaining, known as the Elvis operator, in TypeScript. How does this feature operate within the

Associate a unique identifier string with a randomly generated integer identifier by Agora

Unable to access structuredClone on the global object within a Node.js application

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Display a loading indicator with the shortest possible delay whenever utilizing the React Router v6 Link functionality

Accessing video durations in Angular 2

Angular 1.5 component causing Typescript compiler error due to missing semi-colon

Property of object (TS) cannot be accessed

Utilize Array.push to add 2 new rows to a table using Angular 4

Eliminate the usage of JSON.stringify in the Reducer function

Steps for configuring type definitions for an Apollo error response

What is the best way to configure webpack for ng build instead of ng serve?

The switch statement and corresponding if-else loop consistently produce incorrect results

The concept of overloaded function types in TypeScript

What could be the reason my component is not displaying the ContentChild associated with a directive?

Setting the desired configuration for launching an Aurelia application

"Production mode is experiencing a shortage of PrimeNG(Angular) modules, while they are readily accessible in development

Angular2 RC definitions are not recognized by tsc

What is the reason a type is able to cast to an indexed collection when it is inferred, while an explicit type that seems identical is

Angular Material 2: Tips for Differentiating Multiple Sortable Tables in a Single Component