1

我有一些包含这个的代码：

var element = document.getElementById("div0");
    element.parentNode.removeChild(element); // Error points here

我不断得到：

object is possibly 'null'并尝试添加！到元素，但它仍然抱怨。

我怎样才能摆脱这个错误？

4

2 回答 2

2

正如@Sh 已经提到的那样。Pavel 这是一个打字稿错误。

从我的角度来看，您有几个选择，但我只是指出两个选择，我认为这对您的问题是最好的。

选项 1：可选链接

通过使用可选链接null，代码在遇到 a或时会停止执行undefined。此外，与为每个可能为空的属性添加保护相比，它生成的代码更简洁、更少。

const element = document.getElementById("div0");
element?.parentNode?.removeChild(element);

选项 2：守卫

通过使用守卫，只有在条件为真时才能到达代码部分，因此 Typescript 了解这些值是在那时定义的

const element = document.getElementById("div0");
if (element && element.parentNode) {
  element.parentNode.removeChild(element);
}
于 2022-01-12T09:39:19.073 回答
0

这是 typescript 抛出的错误，因为返回类型document.getElementById是HTMLElement | null. 您可以通过在 tsconfig 中设置来禁用此检查strictNullChecks: false，但这是一个有用的检查，因为如果 DOM 中不存在该元素，则调用实际上可能返回 null。您还有其他选项可以在不禁用检查的情况下处理此问题。

您可以检查null并处理此案：

const element = document.getElementById('div0');
if (element === null) {
  // you should handle the case in an appropriate way here
  throw new Error('Element "div0" does not exist.');
}

// after the check above, the error will not be thrown anymore
element.parentNode.removeChild(element);

您可以使用!运算符告诉打字稿它应该假定该值永远不会为空：

const element = document.getElementById('div0')!;
element.parentNode.removeChild(element);

element请注意，如果在运行时，这种方法将导致运行时错误null。

或者您可以使用?to 仅removeChild在元素不是时调用null：

const element = document.getElementById('div0');
element?.parentNode.removeChild(element);

这只会parentNode在element元素不为空时访问。否则，表达式将计算为null并且removeChild不会被调用。

于 2022-01-12T09:46:25.553 回答