Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TS2531: Object is possibly 'null'

I have the following function:-

uploadPhoto() {
    var nativeElement: HTMLInputElement = this.fileInput.nativeElement;

    this.photoService.upload(this.vehicleId, nativeElement.files[0])
        .subscribe(x => console.log(x));
}

however on the nativeElement.files[0], I am getting a typescript error, "Object is possibly 'null'". Anyone can help me solve this issue?

I tried to declare the nativeElement as a null value, however did not manage to succeed.

Thanks for your help and time.

like image 321
JMon Avatar asked Mar 22 '18 14:03

JMon


People also ask

How do you fix error object is possibly null?

The error "Object is possibly 'null'" occurs when we try to access a property on an object that may have a value of null . To solve the error, use the optional chaining operator to short-circuit if the reference is equal to null , e.g. emp?. address?. country .

How do you suppress an object that is undefined?

The "Object is possibly null or undefined" error occurs when we try to access a property on an object that may be null or undefined . To solve the error, use the optional chaining operator or a type guard to make sure the reference is not nullish before accessing properties.

Is of type unknown?

The "Object is of type unknown" error occurs when we try to access a property on a value that has a type of unknown . To solve the error, use a type guard to narrow down the type of the object before accessing a property, e.g. if (err instanceof Error) {} . Copied!


3 Answers

files is defined to be FileList | null so it can be null.

You should either check for null (using an if) or use a "Non-null assertion operator" (!) if you are sure it is not null:

if(nativeElement.files != null) {
    this.photoService.upload(this.vehicleId, nativeElement.files[0])
        .subscribe(x => console.log(x));
}

//OR
this.photoService.upload(this.vehicleId, nativeElement.files![0])
    .subscribe(x => console.log(x));

Note:

The "Non-null assertion operator" will not perform any runtime checks, it just tells the compiler you have special information and you know nativeElement.files will not be null at runtime.

If nativeElement.files is null at runtime, it will generate an error. This is not the safe navigation operator of other languages.

like image 68
Titian Cernicova-Dragomir Avatar answered Oct 22 '22 03:10

Titian Cernicova-Dragomir


TypeScript 3.7 got released in 11/2019. Now "Optional Chaining" is supported, this is the easiest and most secure way of working with potentially null-able values:

You simply write:

nativeElement?.file?.name

Note the Question-Mark! They check for null/undefined and only return the value, if none of the properties (chained with dots) is null/undefined.

Instead of

if(nativeElement!=null && nativeElement.file != null) {
  ....
}

But imagine something more complex like this: crm.contract?.person?.address?.city?.latlang that would otherwise a lot more verbose to check.

like image 34
Markus Avatar answered Oct 22 '22 02:10

Markus


In addition to all the answers mentioned above, still if the user doesn't want the strict null checks in its application, we can just simply disable the strictNullChecks property in our tsconfig.json file.

{
 ...
 "angularCompilerOptions": {
 "strictNullChecks": false,
 ...
 }
}
like image 11
Nitin Bisht Avatar answered Oct 22 '22 02:10

Nitin Bisht