检查TypeScript可选属性值时遇数组越界TypeError问题求助

这个问题本质是数组访问越界导致的：当i是sectorForm数组最后一个元素的索引时，i + 1已经超出了数组的有效索引范围，此时this.sectorForm[i + 1]的值是undefined，再尝试读取它的formContent属性就会抛出你看到的错误。

下面给你几种可行的解决办法：

方法1：先判断索引是否在有效范围内 #

先确认下一个索引没有超出数组长度，再去检查formContent是否存在：

// 先确保下一个元素存在，再判断formContent
if (i + 1 < this.sectorForm.length && typeof this.sectorForm[i + 1].formContent !== 'undefined') {
  this.DevelopmentForm.setValue(this.sectorForm[i + 1].formContent);
}

方法2：使用可选链操作符（推荐） #

如果你的TypeScript版本在3.7及以上，可以用可选链?.语法简化判断，它会在访问的对象为undefined或null时直接返回undefined，避免报错：

const nextFormContent = this.sectorForm[i + 1]?.formContent;
// 确认formContent存在后再赋值
if (nextFormContent) {
  this.DevelopmentForm.setValue(nextFormContent);
}

方法3：先获取下一个元素再判断 #

先把下一个元素取出来，再依次判断元素和formContent是否存在，TypeScript会自动进行类型缩小，代码可读性也不错：

const nextItem = this.sectorForm[i + 1];
// 先判断元素存在，再判断formContent有值
if (nextItem && nextItem.formContent) {
  this.DevelopmentForm.setValue(nextItem.formContent);
}

如果项目支持的话，优先选方法2，代码更简洁优雅，也符合现代TypeScript的写法。

内容的提问来源于stack exchange，提问作者Silva