Struggling to pinpoint the specific property within a complex, deeply nested object

Question

Struggling to pinpoint the specific property within a complex, deeply nested object

Trying to extract the message from the first error in a type-safe manner:

// Data returned from backend
const mutationError: unknown = {
    sources: {
        errors: [
            {
                message: 'Hello from error message'
            }
        ]
    }
};

const sources = (
    typeof mutationError === 'object'
    && mutationError
    && 'sources' in mutationError
    && typeof mutationError.sources === 'object'
    && mutationError.sources
);

const errors = (
    typeof sources === 'object'
    && sources
    && 'errors' in sources
    && Array.isArray(sources.errors)
    && sources.errors
);


const firstError = errors && errors[0];

const message = (
    typeof firstError === 'object'
    && firstError
    && 'message' in firstError
    && typeof firstError.message === 'string'
    && firstError.message
);

However, the variable message is wrongly typed as any. What could be the issue?

Explore more on this TS Playground.

typescript

Answer 1

Answer №1

The issue you are encountering stems from the fact that Array.isArray() has a specific call signature:

interface ArrayConstructor {
    isArray(arg: any): arg is any[];
}

This means that it restricts its argument to an array of type any[], where every element is of the any type. However, since any absorbs all other types (any & T simplifies to just any), this approach does not provide the desired results, as it leads to everything being treated as any thereafter.

It could be argued that instead of any[], perhaps it should return unknown[] using the safer unknown type. Nevertheless, the call signature was established before the introduction of unknown. While there has been discussion in microsoft/TypeScript#26188 about substituting any with unknown in the TypeScript standard library (with coincidentally Array.isArray() being a prime example), such a modification would constitute a significant breaking change and is unlikely to occur.

For now, until this situation changes, a workaround is necessary. One option is to create your own version of Array.isArray() that returns unknown[]. The simplest method to achieve this is by wrapping the function:

function isArray(x: any): x is unknown[] {
    return Array.isArray(x)
}

By utilizing this alternative implementation, you will obtain unknown rather than any:

const errors = (
    typeof sources === 'object'
    && sources
    && 'errors' in sources
    && isArray(sources.errors)
    && sources.errors
);
// const errors: false | unknown[] | null

const firstError = errors && errors[0];
// const firstError: unknown

This behavior is more effective, as unknown & T accurately resolves to T:

const message = (
    typeof firstError === 'object'
    && firstError
    && 'message' in firstError
    && typeof firstError.message === 'string'
    && firstError.message
);
// const message: string | false | null

Link to Playground showcasing code

Answer 2

The issue you are encountering stems from the fact that Array.isArray() has a specific call signature:

interface ArrayConstructor {
    isArray(arg: any): arg is any[];
}

This means that it restricts its argument to an array of type any[], where every element is of the any type. However, since any absorbs all other types (any & T simplifies to just any), this approach does not provide the desired results, as it leads to everything being treated as any thereafter.

It could be argued that instead of any[], perhaps it should return unknown[] using the safer unknown type. Nevertheless, the call signature was established before the introduction of unknown. While there has been discussion in microsoft/TypeScript#26188 about substituting any with unknown in the TypeScript standard library (with coincidentally Array.isArray() being a prime example), such a modification would constitute a significant breaking change and is unlikely to occur.

For now, until this situation changes, a workaround is necessary. One option is to create your own version of Array.isArray() that returns unknown[]. The simplest method to achieve this is by wrapping the function:

function isArray(x: any): x is unknown[] {
    return Array.isArray(x)
}

By utilizing this alternative implementation, you will obtain unknown rather than any:

const errors = (
    typeof sources === 'object'
    && sources
    && 'errors' in sources
    && isArray(sources.errors)
    && sources.errors
);
// const errors: false | unknown[] | null

const firstError = errors && errors[0];
// const firstError: unknown

This behavior is more effective, as unknown & T accurately resolves to T:

const message = (
    typeof firstError === 'object'
    && firstError
    && 'message' in firstError
    && typeof firstError.message === 'string'
    && firstError.message
);
// const message: string | false | null

Link to Playground showcasing code

Struggling to pinpoint the specific property within a complex, deeply nested object

Answer №1

Similar questions

Guidelines for converting an array into checkboxes using React Native with TypeScript

Creating a service class instance within an interceptor in NestJS

``"Resolving the Issue of Null User ID and Unavailable localStorage in Angular Firebase when using Server-Side Rendering with isPlatformBrowser"

Should await be used before dispatching hooks in redux?

Angular 2: Dynamically Adjusting View Components Based on URL Path

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

Highcharts Angular experiencing issues with DataGrouping

The TypeScript inference feature is not functioning correctly

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

What is the process for overloading a Vue component decorator in a TypeScript environment?

Using String Class Constraint in TypeScript

What is the best way to handle optional parameters while also ensuring that a required parameter is passed in TypeScript?

Is it possible to link fields with varying titles in NestJS?

Issue with TypeScript retrieving value from an array

Angular MistakeORAngular Error

We're sorry, the request was blocked due to a missing Access-Control-Allow-Origin header

Inform users once the new application build using Angular 2 with Angular CLI has been deployed

Tips for importing modules in React JS/Next JS + Typescript as 'components/filename' rather than '../../../components/filename'

Tips for restricting keys when using a union as an indexer without demanding all of them

Modify the property of the ChildComponent by utilizing the ViewChild method