TypeScript可选属性访问报错：赋值左侧不可为可选属性的修正最佳实践

云上老周

2026-7-1

解决“赋值表达式的左侧不得为可选属性”警告的最佳实践

原代码中使用?.可选链后直接赋值导致警告，核心原因是：可选链的结果可能为undefined，而JavaScript不允许对undefined进行赋值操作。以下是几种标准修正方案：

优先推荐：先获取元素并判断存在性再操作
先将元素存储到变量中，通过条件判断确保元素存在后再修改样式，既避免重复DOM查询，又代码清晰易维护：
```
const targetElement = document.getElementById('text-elementName');
if (targetElement) {
  targetElement.style.display = "block";
}
```
简洁写法：利用逻辑与运算符短路特性
借助&&的短路逻辑，仅当元素存在时才执行后续赋值操作，但这种写法会重复执行DOM查询，性能略逊于第一种方案：
```
document.getElementById('text-elementName') && (document.getElementById('text-elementName').style.display = "block");
```
TypeScript场景：使用非空断言（谨慎使用）
如果你确定元素一定存在（比如DOM结构固定，该元素必然加载），可以在获取元素后添加非空断言!，告诉编译器该值不会为null/undefined：
```
document.getElementById('text-elementName')!.style.display = "block";
```
注意：如果实际运行中元素不存在，这种写法会抛出Cannot set properties of null的错误，仅在你能100%保证元素存在时使用。