Potential for object nullification (ts18047) persists even following explicit validation

Question

Potential for object nullification (ts18047) persists even following explicit validation

Why am I receiving the error message

'event.target.files' is possibly 'null'

on the highlighted line even though there is a null check on the previous line? I understand that I can use the non-null assertion operator, as shown at the end of the code example below, but could someone please clarify this behavior for me?

https://i.sstatic.net/saBeU.png

const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files === null || event.target.files?.length === 0) return;
    if (allowedExtensions.some((extension) => event.target.files![0].type === extension)) {
        ...
    }
    ...
}

Edit: Interestingly, when I assign the accessed object to a separate variable, no errors are raised:

const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files === null || event.target.files?.length === 0) return;
    const uploadedImage = event.target.files[0];
    if (allowedExtensions.some((extension) => uploadedFile.type === extension)) {
        ...
    }
    ...
}

typescript

Answer 1

Answer №1

This warning is triggered because when you access event.target.files in a lambda function, which is essentially within a callback, TypeScript cannot determine the duration of this callback's existence. It does recognize that it retains a closure with references to both event and event.target.files, possibly being null.

Below is a hypothetical scenario illustrating how similar code could result in an error:

class CallbackHandler { 
  private callback: (() => boolean) | null = null; 
  
  setupCallback(cb: () => boolean) { 
    this.callback = cb; 
  } 
  
  invoke() {
    this.callback?.();
  }
}


const event: React.ChangeEvent<HTMLInputElement> = { target: { files: [{}] } };
const callbackHandler = new CallbackHandler()
const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
  if (event.target.files === null || event.target.files?.length === 0) return;
  callbackHandler.setupCallback((extension) => event.target.files[0].type === extension);
}

// setting up our callback 
handleOnUpload(event);
// now modifying the event
event.target.files = null;
// invoking the callback leads to an error
callbackHandler.invoke();

Answer 2

This warning is triggered because when you access event.target.files in a lambda function, which is essentially within a callback, TypeScript cannot determine the duration of this callback's existence. It does recognize that it retains a closure with references to both event and event.target.files, possibly being null.

Below is a hypothetical scenario illustrating how similar code could result in an error:

class CallbackHandler { 
  private callback: (() => boolean) | null = null; 
  
  setupCallback(cb: () => boolean) { 
    this.callback = cb; 
  } 
  
  invoke() {
    this.callback?.();
  }
}


const event: React.ChangeEvent<HTMLInputElement> = { target: { files: [{}] } };
const callbackHandler = new CallbackHandler()
const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
  if (event.target.files === null || event.target.files?.length === 0) return;
  callbackHandler.setupCallback((extension) => event.target.files[0].type === extension);
}

// setting up our callback 
handleOnUpload(event);
// now modifying the event
event.target.files = null;
// invoking the callback leads to an error
callbackHandler.invoke();

Potential for object nullification (ts18047) persists even following explicit validation

Answer №1

Similar questions

angular displaying incorrect values for counter

Running tests on functions that are asynchronous is ineffective

How to use sinon to create a mock for an independently imported function

Updating a boolean value when the checkbox is selected

Error: Exceeded Maximum Re-Renders. React has set a limit on the number of renders to avoid infinite loops. Issue found in the Toggle Component of Next.js

Exploring Ionic 4 with Angular Router

Utilizing Typescript for manipulation of Javascript objects

Nested forwardRef in React is a powerful feature that allows

Leverage process.env variables within your next.config.js file

Utilizing Angular's global interceptor functionality can streamline the process

Retrieve the value of an object without relying on hardcoded index values in TypeScript

The properties '{ label: string; value: string; }' are required in type 'readonly never[]' for react-select, but they are missing

Utilizing a setup module for configuration purposes

Angular 2 code test coverage

When accessing from the frontend (Angular), the User.FindFirst(ClaimTypes.NameIdentifier) method does not return any values

Struggling to locate the ID linked to a specific ObjectId and encountering issues with the import function?

Using TypeScript with Styled Components .attrs

Looking to extract the expiration date from an x509 certificate?

Issues with manipulating state using TypeScript Discriminated Unions"Incompatibility with setState

Angular HTTP Interceptor delays processing of http requests until a new refresh token is obtained