Question

如何获取流程以将document.getElementById的返回值解释为HTMLInputElement，而不是更一般的HTMLElement？

示例：

let input = document.getElementById('myinput');
console.log(input.value);


script.js:28
 28:   console.log(input.value);
                         ^^^^^ property `value`. Property not found in
 28:   console.log(input.value);
                   ^^^^^ HTMLElement

来自https://github.com/facebook/flow/blob/master/lib/dom.js

declare class Document extends Node {
  …
  getElementById(elementId: string): HTMLElement;
  …
}

但是，getElementById可能会返回一个子类（在本例中为HTMLInputElement）

declare class HTMLInputElement extends HTMLElement {
  …
  value: string;
  …
}

我希望能够访问输入元素的value属性而不会引发错误。

Answer 1

问题是Flow编译器事先不知道HTMLElement input变量的类型，它会抛出错误。

通常这是人们在这种情况下建议做的事情：

var input = document.getElementById('myinput');

if (input instanceof HTMLInputElement) {
    console.log(input.value);
}

在dynamic type tests文档部分中了解此技术。

流类型：从函数返回父类使用扩展类

1 个答案: