Typescript：DOM - 类型 null 不可分配给类型 HTMLFormElement

Question

当使用查询选择器从我的 html 页面中获取表单元素时，如下所示：

让表单：HTMLFormElement = document.querySelector('.credential_form');

编译器给我以下错误： '输入 HTMLFormElement | null 不可分配给 HTMLFormElement 类型。类型 null 不可分配给类型 HTMLFormElement'

有什么办法可以解决这个问题吗？

有什么办法可以解决这个问题吗？

Answer 1

发生此错误是因为编译器无法确定它是否会在您的 html 中找到类为“credential_form”的表单元素。如果不是，则 querySelector 返回 null。因此它给表单一个联合类型 HTMLFormElement | null 以涵盖这两种情况。

解决这个问题的最简单方法是使用！运算符（空断言） 这告诉编译器你确定表单不会有空类型

让表格：HTMLFormElement = document.querySelector('.credential_form')!;

应该这样做！

Answer 2

querySelector

方法的默认返回类型是可空的

Element

.

您可以使用自定义断言函数来确保

querySelector

方法返回预期的元素：

function assertElement<TagName extends keyof HTMLElementTagNameMap>(
  tagName: TagName,
  element: Element | null | undefined,
): asserts element is HTMLElementTagNameMap[TagName] {
  if (element == null) {
    throw new TypeError(`Expected <${tagName}> but found ${element}`);
  } else if (element.tagName !== tagName.toUpperCase()) {
    throw new TypeError(`Expected <${tagName}> but found <${element.tagName}>`);
  }
}

然后，在

querySelector

方法返回的值上使用它来断言元素是预期的类型：

TS游乐场

let form = document.querySelector('.credential_form');
  //^? let form: Element | null

// If the element doesn't exist or isn't a form element,
// a TypeError will be thrown here at runtime:
assertElement("form", form);

// Otherwise, afterward the compiler will know that "form" is HTMLFormElement:
console.log(form);
          //^? let form: HTMLFormElement