typescript TS2531：对象可能为“空”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49431880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TS2531: Object is possibly 'null'
提问by Johann
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?
但是在 nativeElement.files[0] 上，我收到了一个打字稿错误，“对象可能是‘空’”。任何人都可以帮我解决这个问题吗？
I tried to declare the nativeElement as a null value, however did not manage to succeed.
我试图将 nativeElement 声明为空值，但是没有成功。
Thanks for your help and time.
感谢您的帮助和时间。
回答by Titian Cernicova-Dragomir
filesis defined to be FileList | nullso it can be null. You should either check for null (using a if) or use a not null assertion operator (!) if you are sure it is not null;
files被定义为FileList | null所以它可以是null。如果您确定它不为空，您应该检查空值（使用 a if）或使用非空断言运算符（!）；
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));
NoteThe not null assertion operator, will not perform any runtime checks, it just tells the compiler you have special information and you know nativeElement.fileswill not be null at runtime. If nativeElement.filesis null at runtime, it will generate at error. This is not the safe navigation operator of other languages.
注意非空断言运算符不会执行任何运行时检查，它只是告诉编译器您有特殊信息并且您知道nativeElement.files在运行时不会为空。如果nativeElement.files在运行时为 null，则会在错误时生成。这不是其他语言的安全导航操作符。
回答by Markus
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:
TypeScript 3.7 于 11/2019 发布。现在支持“可选链”，这是处理可能为空的值的最简单和最安全的方法：
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?.latlangthat would otherwise a lot more verbose to check.
但是想象一下像这样更复杂的事情：crm.contract?.person?.address?.city?.latlang否则检查起来会更加冗长。
回答by Vayrex
If you are sure that there is a file in all cases. You need make compiler to be sure.
如果您确定在所有情况下都有一个文件。你需要 make compiler 来确定。
(nativeElement.files as FileList)[0]
回答by Jamie
Using the answer from Markus which referenced optional chaining, I solved your problem by casting nativeElementto HTMLInputElementand then accessing the 0thfile by using .item(0)with the optional chaining operator ?.
使用引用可选链接的 Markus 的答案，我通过强制转换nativeElement为HTMLInputElement然后0th使用.item(0)可选链接运算符访问文件来解决您的问题?.
uploadPhoto() {
var nativeElement = this.fileInput.nativeElement as HTMLInputElement
this.photoService.upload(this.vehicleId, nativeElement?.files?.item(0))
.subscribe(x => console.log(x));
}
