TS正在做它的工作，并告诉您window.document.getElementById("foobar")可以返回null。
如果您绝对确定#foobar元素确实存在于DOM中，那么可以使用!操作符向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
}

window.document.getElementById("foobar");
返回的是HTMLElement还是null
就像你之前用过类似的语句一样：window.document.getElementById("foobar").value
Typescript抱怨，该值可能无法访问，您应该在此之前显式检查。
要避免这种情况，您可以执行以下操作：

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

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

这是因为你必须设置类型。

const checkbox = document.getElementById("toggleFilter") as HTMLInputElement
checkbox.checked = true

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

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

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

Typescript抱怨对象（在您的情况下window.document.getElementById执行的结果）可能为null。
这可以使用tsconfig.json中的strictNullChecks标志关闭，我不推荐这样做。
或者，您可以按照其他答案中的建议执行检查，或者从Typescript 3.7开始使用可选链接语法使您的代码更加简洁：

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

将此.（？）添加到数组中，示例：

form.get('description')?.errors