在数组内查找对象时，Typescript 对象可能未定义

Question

当您将值赋予变量并且该值可能未定义时，Typescript 会报错。通常可以通过!在您传递的值后面插入或使用简单的if语句来解决这个问题。问题是第一个对我不起作用，使用后者会导致我在代码中添加不必要的额外行。场景如下：

我有这个界面。我使用它的数组作为我的组件状态：

interface IFormFields {
    name: string; isValid: boolean; content: string; isUnchanged: boolean; tip: string
}

...

const [requiredFields, setRequiredFields] = useState<Array<IFormFields>>([]);

后来我想让requiredFields对象使用它们的值。我想通过使用 JavaScript 的find方法来做到这一点：

requiredFields.find(field => field.name === "Nome")

此行会导致错误，因为“field”可能未定义。在这种情况下，K 运算符会导致另一个错误

requiredFields.find(field! => field.name === "Nome")
//"Cannot find name 'field'.ts(2304)"

正如我所说，使用if子句会导致大量不必要的代码行，因为requiredFields其中可以有 n 个对象。有什么解决方法吗？

Answer 1

如果要使用该!运算符，则需要在访问其属性的地方进行操作，即

requiredFields.find(field => field!.name === "Nome")

但是，我建议您改用运算?符；这样，如果field 确实未定义，您将不会收到运行时错误：

requiredFields.find(field => field?.name === "Nome")

简而言之，field!.name只是告诉编译器您知道field已定义，而field?.name自动为您放入null/undefined检查（从而避免代码混乱）。