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.
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.
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.
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,
...
}
}
If you are sure that there is a file in all cases. You need make compiler to be sure.
(nativeElement.files as FileList)[0]