Question

第一次将Typescript添加到我的项目中。

在一个地方，我曾使用window.document.getElementById访问某些内容。并给出了此错误。

Type error: Object is possibly 'null'.  TS2531

我在线搜索，但无法为此找到最佳解决方案。 window永远不能为null。我该如何解决此错误？请帮助。

Answer 1

TS正在执行其工作，并告诉您window.document.getElementById("foobar")可能返回null。

如果您完全确定DOM中存在#foobar元素，则可以使用!运算符向TS表示信心。

// Notice the "!" at the end of line
const myAbsolutelyNotNullElement = window.document.getElementById("foobar")!

或者，您可以添加运行时可为空的检查以使TS满意

const myMaybeNullElement = window.document.getElementById("foobar")

myMaybeNullElement.nodeName // <- error!

if (myMaybeNullElement === null) {
  alert('oops');
} else {
  // since you've done the nullable check
  // TS won't complain from this point on
  myMaybeNullElement.nodeName // <- no error
}

Answer 2

window.document.getElementById("foobar");

返回HTMLElement还是null

您可能在之前使用过类似的语句：window.document.getElementById("foobar").value

Typescript抱怨，该值可能无法访问，您应该在此之前进行显式检查。

为避免这种情况，您可以执行以下操作：

const element = window.document.getElementById("foobar");

if (element !== null) {
    alert(element.value);
}

Answer 3

Typescript抱怨对象（在您的情况下执行window.document.getElementById的结果可能为空）。

可以使用您不推荐的tsconfig.json中的strictNullChecks标志来关闭此功能。

或者，您可以根据其他答案中的建议进行检查，也可以使用Optional Chaining语法从Typescript 3.7开始使代码更简洁：

obj?.doSometething(); //good, will not do something.
obj?.prop = 'plop'; //not good because it does not work with assignments.

Answer 4

添加这个。 ( ? ) 在数组中，示例：

form.get('description')?.errors

Answer 5

在这里您必须确保您的 window.document.getElementById("id_name")! 已设置。你可以试试这个

const element = window.document.getElementById("id_name");

if(element){
console.log(element);
}

类型错误：对象可能为'null'。 TS2531（用于window.document）

5 个答案: