Typescript compiler unexpectedly checks for null within array functions

Question

Typescript compiler unexpectedly checks for null within array functions

In my TypeScript code, I have a function that exhibits the following structure:

const myFunction = () => {
    if(!props.object) return;
    if (someCondition) {
      return randomArray.items.find(item => item.id === props.object.someID)
    }
   ...
  }

The variable props.object is defined as type FooObject | null, and despite implementing checks, the compiler insists on treating it as potentially null.

I've noticed that this issue only arises within functions embedded in arrays. For instance, consider the below scenario:

const myFunction = () => {
    if(!props.object) return;
    const foo = props.object.property1;
   ...
  }

Here, using props.object does not result in the null error, and foo correctly inherits the type of property1.

After conducting research, my findings didn't yield any solution besides resorting to the ! operator which ignores checks - an undesirable workaround. Alternatively, repeatedly verifying for null using the && or ternary operator whenever props.object is referenced seems redundant. A singular check at the start of the function should suffice logically. Any guidance provided would be greatly appreciated. Thank you in advance!

typescript

Answer 1

Answer №1

This situation may be inconvenient, as the guard cannot be automatically applied to the expression within the callback body.

Take a look at this code snippet (it's similar to what you provided)

type Foo = {
  someID: string
}

type Props = {
  object: Foo | null;
}

function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  return randomArray.find(item => item === props.object.someID ); // encounter compile error
}

Assume that this code works without any errors.

Now, let's consider something more complex:

...
function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  setTimeout( () => { props.object = null }, 500 );

  setTimeout( () => randomArray.find(item => item === props.object.someID ), 1000 );

  ...

}

In this scenario, the code clears props.object first and then executes the callback. This would cause an exception in runtime, but the compiler would still permit it.

Another potential solution is to bind the problematic expression to a local variable:

function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  let propsObject = props.object;

  return randomArray.find(item => item === propsObject.someID ); // no error
}

(other solutions involving ! and checking inside the callback were previously mentioned in your question)

Answer 2

This situation may be inconvenient, as the guard cannot be automatically applied to the expression within the callback body.

Take a look at this code snippet (it's similar to what you provided)

type Foo = {
  someID: string
}

type Props = {
  object: Foo | null;
}

function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  return randomArray.find(item => item === props.object.someID ); // encounter compile error
}

Assume that this code works without any errors.

Now, let's consider something more complex:

...
function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  setTimeout( () => { props.object = null }, 500 );

  setTimeout( () => randomArray.find(item => item === props.object.someID ), 1000 );

  ...

}

In this scenario, the code clears props.object first and then executes the callback. This would cause an exception in runtime, but the compiler would still permit it.

Another potential solution is to bind the problematic expression to a local variable:

function myFunction( props: Props, randomArray: string[] ) {
  if ( !props.object ) return;

  let propsObject = props.object;

  return randomArray.find(item => item === propsObject.someID ); // no error
}

(other solutions involving ! and checking inside the callback were previously mentioned in your question)

Typescript compiler unexpectedly checks for null within array functions

Answer №1

Similar questions

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Troubleshooting Issue: Ionic 3 and Angular ngForm not transmitting data

TypeScript's Awaitable concept

Building classes in TypeScript

What is the best way to determine the type of a variable while inside an `if` statement?

The concept of Nested TypeScript Map Value Type

Encountering a problem with loading popper.js in Bootstrap 4 while utilizing require.js for loading

How to extract the chosen option from a bound list within an Angular application

The Angular router is directed to an empty URL path instead of the specified URL

Taking advantage of Input decorator to access several properties in Angular 2

(TypeScript) Defining a Type Alias or Interface using an object literal

What is the best way to tag a function that takes a constructor function type as a parameter?

Angular click event to compute a function and display the result on a separate page

Execute consecutive Angular2 functions in a sequential manner, one following the next

My attempt to compile my Angular 6 project is encountering an error. The error message points to a problem in the core.d.ts file located within the node_modules folder, specifically on line

Creating a dynamic selection in Angular without duplicate values

Encountering a snag when trying to load JavaScript within an HTML document

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Tips for postponing the opening of a CDK overlay

Seeking the Origin of NgxMqttServiceConfig Import: Dealing with NullInjectorError in Angular Testing