检查 TypeScript 中是否选中复选框元素

Question

我的 html 文件上有一个复选框。

<input id="is3dCheckBox" type="checkbox" checked="checked" />

我想知道 .ts 文件中是否选中了此复选框。
获得此元素后应该进行什么转换才能检查它？

Answer 1

您只需要使用类型断言来告诉 TypeScript 它是一个 HTMLInputElement：

var element = <HTMLInputElement> document.getElementById("is3dCheckBox");
var isChecked = element.checked;

更新：

任何想法为什么 var element = document... 有效，但是 var 元素：HTMLInputElement = document... 不是吗？

当您使用

getElementById

时，返回的元素可以是任何类型的 HTML 元素。例如，它可以是段落标签。因此，该 DOM 方法的类型定义返回一个非常通用的

HTMLElement

类型。

当您尝试以下操作时：

var element: HTMLInputElement = document.getElementById('is3dCheckBox');

编译器警告您

getElementById

的结果不是

HTMLInputElement

，也不是

HTMLInputElement

的子类型（因为它实际上是您想要的超类型）。

当您知道元素类型时，使用类型断言告诉编译器类型是完全正常的。当您使用类型断言时，您告诉编译器您更了解。

在某些情况下，编译器在使用类型断言时会仍然警告您，因为它可以告诉您断言可能是一个错误 - 但您仍然可以强制它，但首先扩大类型：

var isChecked = (<HTMLInputElement><any>myString).checked;

在断言

any

 之前，字符串变量被扩展为 

HTMLInputElement

 类型。希望您不需要经常使用这种类型断言。

Answer 2

如果你像我一样使用 tsx 文件，你不能使用尖括号语法，你必须使用“as”

  let element  =  document.getElementById("is3dCheckBox") as HTMLInputElement; 
  if(element.checked){
    // TODO
  }

您可以在这里阅读更多内容

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

Answer 3

对于 documet.getElementById 您可以使用：

let element = <HTMLInputElement> document.getElementById("is3dCheckBox");  
if (element.checked) { you code }

对于 documet.getElementsByName 您可以使用：

let element = <any> document.getElementsByName("is3dCheckBox");  
if (element.checked) { you code }

Answer 4

我将提供评分最高的答案的替代方案。使用类型断言可能会导致错误，并且在某种程度上违背了使用打字稿的目的。

Document.getElementById

的返回类型是

HTMLElement | null

，那么当函数定义的创建者无法保证这样的操作时，如何保证返回类型是复选框。如果有人输入错误或将复选框更改为选择元素怎么办？

首先，创建一个CheckboxElement类型：

interface CheckboxElement extends HTMLInputElement {
  type: "checkbox";
}

然后创建一个函数来缩小从

getElementById

接收到的类型：

function toCheckbox(
  element: HTMLElement | null
): CheckboxElement | null {
  const checkbox = element as CheckboxElement;
  return checkbox?.type.toLowercase() === "checkbox" : null;
}

然后，使用这样的函数：

const element = document.getElementById("is3dCheckBox");
const checkbox = toCheckbox(element)
if (!checkbox) {
  // handle not a checkbox however you like;
  console.error("not a checkbox");
  return;
}
const isChecked = checkbox.checked;

这确实添加了更多代码，并且根据情况使用类型断言可能更好。我更喜欢仅在测试代码中使用类型断言。