当我在 TypeScript 中遇到 "Object is possibly null" 错误时我应该怎么做？

Question

在我的 tsconfig.json 文件的 compilerOptions 对象中，我将 strictNullChecks 选项设置为 true。

有时，当我使用 getElementById("...") 或 querySelector("...") 等函数时，我会收到以下（非致命）错误：

TS2531: Object is possibly 'null'

我知道为什么我收到这个错误（有时元素尚未加载或找不到），但我到底应该做什么我什么时候收到这个错误？

将使用元素的代码放在 if 条件中是否合适，如下所示：

let divs: HTMLElement | null = document.getElementById("div");
if(divs !== null) {
  // do stuff with divs...
}

或者我应该做点别的吗？

谢谢。

Answer 1

Would it be appropriate to just put the code that used the element(s) inside an if condition

是的。正如您所说，有时该元素不存在，因此您会得到 null。检查是否合适。

如果您需要在知道元素存在的情况下使用 getElementById 或 querySelector，您可以给自己一个辅助函数抛出而不是返回 null:

function getGuaranteed(id: string): HTMLElement {
    const el = document.getElementById(id);
    if (el == null) {
        throw new Error("Element #" + id + " not found.");
    }
    return el as HTMLElement;
}

...并在您知道元素将在那里的情况下使用它。

当我在 TypeScript 中遇到 "Object is possibly null" 错误时我应该怎么做？

What exactly am I supposed to do when I get a "Object is possibly null" error in TypeScript?

error-handling

null

compiler-options

typescript