如何解决TypeScript中Object is possibly 'null'错误？

你遇到的报错是因为document.getElementById('clear')可能返回null（当页面中不存在对应id的元素时），TypeScript会严格检查这种可能的空值情况，下面是几种实用的解决方式：

• 非空断言操作符!
  直接在获取元素的表达式后加!，明确告诉TypeScript该元素一定存在：

  document.getElementById('clear')!.onclick = function () {
      console.log('ParticleWave will clear', pw)
      pw.clear()
  }
  

  注意：只有你100%确定页面中存在id为clear的元素时才用，否则运行时会触发错误。

• 条件判断（推荐）
  先判断元素是否存在，再绑定事件，从根源避免空值问题：

  const clearBtn = document.getElementById('clear');
  if (clearBtn) {
      clearBtn.onclick = function () {
          console.log('ParticleWave will clear', pw)
          pw.clear()
      }
  }
  

  这种方式最安全，即使元素不存在也不会报错，适合大多数场景。

• 可选链操作符?.
  用可选链简化判断，当元素不存在时，赋值操作会静默失败，不会触发报错：

  document.getElementById('clear')?.onclick = function () {
      console.log('ParticleWave will clear', pw)
      pw.clear()
  }
  

• 类型断言
  通过类型断言明确指定元素的类型，同时隐含非空的假设：

  const clearBtn = document.getElementById('clear') as HTMLElement;
  clearBtn.onclick = function () {
      console.log('ParticleWave will clear', pw)
      pw.clear()
  }
  

  同样需要确保元素实际存在，否则运行时会出问题。

另外，如果pw也存在可能为null或undefined的情况，建议在事件回调里也加上判断：

const clearBtn = document.getElementById('clear');
if (clearBtn && pw) {
    clearBtn.onclick = function () {
        console.log('ParticleWave will clear', pw)
        pw.clear()
    }
}

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