为什么我们在typescript中使用HTMLInputElement？

Question

我们为什么使用：

(document.getElementById("ipv") as HTMLInputElement).value;

而不是：

document.getElementById("ipv").value;

?

Answer 1

文档。getElementById（）将无法返回特定的元素类型，因为它事先不知道该元素将是什么，因此需要在事实发生后将结果转换为HTMLInputElement，以便可以识别该类的value属性。

Answer 2

函数getElementById返回类型为HTMLElement的对象。

来自lib。多姆。d、 ts：

 /**
 * Returns a reference to the first object with the specified value of the ID or NAME attribute.
 * @param elementId String that specifies the ID value. Case-insensitive.
 */
getElementById(elementId: string): HTMLElement | null;

HTMLElement类型是DOM的其他标签类型的基本类型。例如，类型HTMLInputElement扩展了HTMLElement并具有类型HTMLElement所没有的属性value。

来自lib。多姆。d、 ts：

interface HTMLInputElement extends HTMLElement {
...
/**
 * Returns the value of the data at the cursor's current position.
 */
value: string;
...

由于HTMLInputElement扩展了HTMLElement，下面几行可以编译：

const inputTag = document.getElementById('name-input') as HTMLInputElement;
const value = inputTag.value;