What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

Question

What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

Currently, I am leveraging redux sagas to fetch data asynchronously from various endpoints using a unified interface:

export interface ResponseInfo {
    data?: any;
    status: number;
    headers?: any;
    subCode?: string;
}

To ensure that null checking is enforced on the dynamic 'data' object (of type any), I require that every developer includes null checking when accessing properties. For example:

if(response.data.pizza.toppings){}

This code should result in a compile error unless proper null checks are added like so:

if(response.data && response.data.pizza && response.data.pizza.toppings){

}

While TypeScript with --strictNullChecks does not catch the lack of null checking in the aforementioned line, I wonder if tslint's no-unsafe-any rule could address this issue. Is there a built-in way for TypeScript to perform this validation independently?

javascript typescript redux-saga

Answer 1

Answer №1

This object can be defined using an interface with an index signature:

export interface ResponseInfo {
    data?: RecursiveObject;
    status: number;
    headers?: any;
    subCode?: string;
}

interface RecursiveObject {
    [s: string]: RecursiveObject | undefined
}

// How to use 

declare let response : ResponseInfo
if(response.data.pizza.toppings){ // Object is possibly 'undefined'

}

if(response.data.pizza){ // Object is possibly 'undefined'

}

The issue lies in response.data.pizza.toppings being a RecursiveObject, which isn't very helpful. To handle this and ensure safety, a custom type guard can be used to refine the type of the final result for more utility. (Note that a standard type guard won't suffice because RecursiveObject has no relation to string, causing a simple guard like

typeof response.data.pizza.toppings === 'string'

to narrow down to never)

function isString(o: RecursiveObject|string ): o is string {
    return typeof o === "string"
}

declare let response : ResponseInfo
if(response.data && response.data.pizza && response.data.pizza.toppings
    && isString(response.data.pizza.toppings) ){
    let s : string = response.data.pizza.toppings;

}

Somewhat lengthy but potentially beneficial.

Answer 2

This object can be defined using an interface with an index signature:

export interface ResponseInfo {
    data?: RecursiveObject;
    status: number;
    headers?: any;
    subCode?: string;
}

interface RecursiveObject {
    [s: string]: RecursiveObject | undefined
}

// How to use 

declare let response : ResponseInfo
if(response.data.pizza.toppings){ // Object is possibly 'undefined'

}

if(response.data.pizza){ // Object is possibly 'undefined'

}

The issue lies in response.data.pizza.toppings being a RecursiveObject, which isn't very helpful. To handle this and ensure safety, a custom type guard can be used to refine the type of the final result for more utility. (Note that a standard type guard won't suffice because RecursiveObject has no relation to string, causing a simple guard like

typeof response.data.pizza.toppings === 'string'

to narrow down to never)

function isString(o: RecursiveObject|string ): o is string {
    return typeof o === "string"
}

declare let response : ResponseInfo
if(response.data && response.data.pizza && response.data.pizza.toppings
    && isString(response.data.pizza.toppings) ){
    let s : string = response.data.pizza.toppings;

}

Somewhat lengthy but potentially beneficial.

What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

Answer №1

Similar questions

Displaying a div component in React and Typescript upon clicking an element

Are you prepared for changing DropDowns?

When a button is clicked, the event is not triggered within a FirefoxOS application

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Can I use Javascript to access a span element by its class name?

Detecting Eyes with the Power of JavaScript and HTML5

Struggling to retrieve the most recent emitted value from another component in Angular?

Adjust the object's width and position based on the window's width

Angular error TS2339: The property 'before' is not found on type 'HTMLElement' / 'HTMLTextAreaElement' / etc

Definitions for Typescript types that describe a custom hook responsible for fetching a specific part of the Redux state

The parameter failed to initialize causing the HTTP service to fire prematurely

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

JavaScript/TypeScript Asynchronous Filtering on AsyncIterable<T>

What is the best way to monitor and record the height of a div element in a React application?

Strict mode error occurs when attempting to assign a value to ngComponentOutlet that is incompatible with the type of the lazy-loaded component

What is the best way to assign a default value in mat-select when using an ngFor loop?

When I press the single quote, the submit button becomes disabled and stops working

Guide to creating varying component sizes using ReactJS and Styled Components

Guide on accessing mobile information and sim card details with Ionic 3 and Cordova on Android devices

Struggling to display text content from an array onto the HTML webpage